<template>
  <div>
    <div class="pro-header" :class="{ 'active': isFocus }">
      <div class="hed-left">
        <a class="col-side-bar" @click="handleCollApseSidbar"></a>
        <a class="sys-logo" href="/">
          <img loading="lazy" :src="logoPic" class="dark-logo" alt="" />
        </a>
      </div>
      <div class="main-navs">
        <a href="/games?t=1" class="nav" :class="{'cur':pageTab==1}">游戏</a>
        <a href="/screenshots?t=2" class="nav" :class="{'cur':pageTab==2}">截图</a>
        <a href="https://nv9yzrinr2z.feishu.cn/share/base/form/shrcn9YkP2UO3zt2lIy4rv1vAif" class="nav ai-hnav" target="_blank">AI绘画</a>
      </div>
      <div class="search-bx">
        <!-- <div class="placeholder-text" id="placeholder_text">
            <span class="typing"></span>
        </div> -->
        <form @submit.prevent="() => { return false; }"
          :class="[globalSearchKeyType ? typeEnum[globalSearchKeyType].classname : '', isFocus ? 'active' : '', globalSearchKeyType ? 'has-pdl' : '']">
          <span class="search-by-type" v-if="globalSearchKeyType">{{ typeEnum[globalSearchKeyType].text }}<a
              class="cancel-by-type" @click="globalSearchKeyType=''"></a></span>
          <input id="top_global_searchbox" :autofocus="false" autocomplete="off" class="active" @keyup="handleBylikeSearch" v-model="globalKeyword" @keyup.enter="enterSearch"
            @focus="onSearchBoxFocus" type="text" :placeholder="placeHolderText" />
          
          <span class="rig-funs">
            <a class="cancel-search" v-if="globalKeyword" @click="globalSearchkeys=[];globalKeyword='';"></a>
            <el-popover popper-class="xkj-sou-pop"
                      placement="bottom"
                      trigger="hover">
                      <div class="xj-search-desc">
                        <div class="sub-desc">提示：输入斜杠 / 快速开启搜索栏</div>
                        <div class="sub-d">在任意位置按下 / 即可开始搜索</div>
                      </div>
              <a slot="reference" class="xg-kj" @click="handleShowSearch"></a>
            </el-popover>
            <el-popover popper-class="gm-info-pop"
                      placement="top-start"
                      trigger="hover">
                      <i class="sm-tip" slot-content>找相似</i>
                      <a slot="reference" class="pic-to-pic" @click="isFocus = true; showBeSimliar = true"></a>
                    </el-popover>
          </span>
        </form>
        <div class="pro-search-full-box" v-if="isFocus">
          <div class="psf-wrap" @drop="onDrop" @dragover="onOndragover" @dragenter="onOndragEnter" @dragleave="onOndragLeave" @paste="onPaste">
            <template>
              <template v-if="globalSearchkeys.length == 0 && !showBeSimliar">
                <div class="yd-types">
                  <a @click="handleTypeBy('linggan')">搜索 游戏</a>
                  <a @click="handleTypeBy('discover')">搜索 作品</a>
                  <a @click="handleTypeBy('articleImage')">搜索 截图</a>
                  <a @click="handleTypeBy('article')">搜索 文章</a>
                  <!-- <a @click="handleTypeBy('video')">搜索 短视频</a> -->
                  <a @click="handleTypeBy('explorer')">搜索 收藏夹</a>
                </div>
                <template v-if="searchData.length > 0">
                  <div class="search-s-tit">历史搜索</div>
                  <div class="pro-near-searchs">
                    <a v-for="(str, idx) in searchData" :key="idx" @click="handleSearchByCommkey(str)"
                      :title="str">{{ str }}</a>
                  </div>
                </template>
                <div class="search-s-tit">今日热搜</div>
                <div class="pro-hot-searchs">
                  <a v-for="(item,index) in hotWordsList" @click="goSearchByHotKey(item.name)">{{item.name}}</a>
                </div>
                <div class="search-s-tit">热门精选</div>
                <div class="pro-hot-concentration">
                  <div class="pro-hot-container">
                    <a v-for="(item, idx) in fitCollections" :key="idx" @click="toGamePageByStyle(item)">
                      <img loading="lazy" :src="item.image" alt="">
                      <span>{{ item.name }}</span>
                    </a>
                    <a class="see-all" @click="toGamePageByStyle()">查看所有></a>
                  </div>
                </div>
              </template>
              <div class="pro-search-result" v-if="globalKeyword && globalSearchkeys.length > 0&&!showBeSimliar">
                <a :class="['result-item', idx == keySelectIndex ? 'selected-key' : '']" v-for="(item, idx) in globalSearchkeys"
                  :key="idx" @click="changeKeyItem(item)">
                  <div class="img-box">
                    <img loading="lazy" @error="loadError" :src="`https://img.gameui.net/article-${item.id}-${version()}@1x70.webp`"
                      :srcset="`https://img.gameui.net/article-${item.id}-${version()}@1x70.webp 1x,https://img.gameui.net/article-${item.id}-${version()}@2x70.webp 2x,https://img.gameui.net/article-${item.id}-${version()}@3x70.webp 3x`"
                      alt="">
                  </div>
                  <div class="basic">
                    <div class="title-wrap">
                      <div class="title" v-html="item.content"></div>
                      <span class="type">{{ cnName[item.type] }}</span>
                    </div>
                    <div class="catre">{{ item.userName ? item.userName : '未知用户' }}</div>
                  </div>
                </a>
              </div>
            </template>

            <div class="be-simliar" v-if="showBeSimliar && !keyword">
              <a class="close-be-simliar" @click="isFocus = false; showBeSimliar = false"></a>
              <div class="bs-layout-left-img">
                <img loading="lazy" src="../assets/pro/smlike_pt.webp"/>
              </div>
              <div class="bs-layout-fun">
                <div class="title"></div>
                <div class="small-tip">上传图片，智能识别相似内容</div>
                <div class="upload-area-wrap" id="upload-area-wrap">
                  <el-upload class="upload-btn" action="" accept=".jpg,.png,.gif" :show-file-list="false"
                    :http-request="pictureBefore"></el-upload>
                  <span class="fun-text">拖放图片至此 或 Ctrl+v 粘贴</span>
                </div>
                <div class="other-tip">热门示例图片</div>
                <div class="other-sys-imgs">
                  <img loading="lazy" @click="handleUrlToSearch(imgitem.image)" v-for="(imgitem, idx) in recommendlist" :key="idx"
                    :src="imgitem.image" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- <div class="game-n-u-visit top-gm-uv" v-if="showFnew">
            <div class="nv-content">
              <div class="nv-content-l">
                  <span class="big-t">以图搜UI，焕然一新</span>
                  <span>智能识别UI元素，快速匹配相似设计， </span>
                  <span>为你推荐优质游戏界面</span>
              </div>
              <a class="n-u-v-close" @click="handlCloseTop"></a>
            </div>
            <div class="cursor"></div>
            <a class="top-cbox" @click="isFocus = true; showBeSimliar = true;handlCloseTop();"></a>
        </div> -->
      </div>
      <div class="hr-area">
        <div class="them-area" @click="handleSwitch">
          <!-- <a class="thm" @click="handleSwitch('light')"></a> -->
        </div>
        <!-- <router-link to="/bountyscheme" class="jl-t">奖励</router-link> -->
        <template v-if="isLogin">
          <NoticeBar />
          <a class="user-avatar">
            <img loading="lazy" class="tar-img" @click="toUserCenter" v-aimgd="{ avatar: userInfo.avatar, id: userInfo.id, w: 72, name: userInfo.userName }" @error="loadError"/>
            <div class="user-panel-box">
              <div class="wrap">
                <div class="basic-uinfo">
                  <div class="avatar">
                    <a :href="'/user/' + userInfo.id" @click.prevent="toUserCenter"><img loading="lazy"
                        v-aimgd="{ avatar: userInfo.avatar, id: userInfo.id, w: 100, name: userInfo.userName }"></a>
                  </div>
                  <div class="basic-info">
                    <a :href="'/user/' + userInfo.id"  @click.prevent="toUserCenter" class="name">{{ userInfo.userName }}</a>
                    <a href="/personal/personalData" @click.prevent="toEdit" class="edit-link">编辑个人资料</a>
                  </div>
                </div>
                <div class="num-statistics-box">
                  <router-link class="a-my-realease" to="/publish/publishManage">
                    <i class="ncount">{{ nums.linggan+nums.article+nums.discover }}</i>
                    <span class="txt">我的发布</span>
                  </router-link>
                  <router-link class="a-my-parise" to="/likes">
                    <i class="ncount">{{ nums.praisedGameCount+nums.praisedImageCount+nums.praisedZuopinCount+nums.praisedArticleCount }}</i>
                    <span class="txt">我的喜欢</span>
                  </router-link>
                  <router-link class="a-my-fav" to="/myCollection">
                    <i class="ncount">{{ nums.explorerArticleCount+nums.explorerImagesCount }}</i>
                    <span class="txt">我的收藏</span>
                  </router-link>
                  <router-link class="a-my-bw-history" to="/browseRecords">
                    <i class="ncount">30天内</i>
                    <span class="txt">浏览记录</span>
                  </router-link>
                </div>
                <div class="mg-items">
                  <router-link to="/exclusiveSetting">管理关注</router-link>
                  <router-link to="/personal/personalData">个人设置</router-link>
                  <a @click="touchToOut">退出登录</a>
                </div>
              </div>
            </div>
          </a>
          <a class="release-plus">
            <div class="sub-dd-block">
              <ul class="sub-ddls">
                <li class="f-game-pic-btn"><a class="rv" href="/publish/publishGame">上传游戏截图</a></li>
                <li class="f-work-btn"><a class="rv" href="/publish/publishWork" >发作品</a></li>
                <!-- <li class="f-s-video-btn"><router-link class="rv" to="/publish/publishVideo">发短视频</router-link></li> -->
                <li class="f-article-btn"><a class="rv" href="/publish/publishArticle">写文章</a></li>
              </ul>
            </div>
          </a>
        </template>
        <a class="login-btn" @click="handleShowLogin" v-else>登录/注册</a>
      </div>
      <div class="header-mask" v-if="isFocus" @click="isFocus = false;">

      </div>
    </div>
    <div class="pro-main-mask"  @drop="onDrop" @dragover="onOndragover" @dragenter="onOndragEnter" @dragleave="onOndragLeave" v-if="isFocus" @click="isFocus=!isFocus">

    </div>
    <a-modal v-model="showLogin" destroyOnClose centered :footer="null" :closable="false"  width="520px">
      <Login ref="refLogin" @close="showLogin = false" />
    </a-modal>

    <el-drawer :with-header="false" destroy-on-close :modal="false" append-to-body :visible.sync="showInfo"
      direction="btt">
      <!-- 游戏详情 -->
      <gameInfo @close="onInfoClose" v-if="pageType == 'linggan'" :id="currentId" />
      <!-- 作品详情 -->
      <workInfo @close="onInfoClose" v-else-if="pageType == 'discover'" :id="currentId"/>
      <!-- 文章详情 -->
      <articleInfo @close="onInfoClose" v-else-if="pageType == 'article'" :id="currentId" />
    </el-drawer>

    <div class="menu-mask" @click="handleHidden"></div>
  </div>
</template>

<script>
import gameInfo from '@/components/gameInfo'
import articleInfo from '@/components/articleinfo'
import workInfo from '@/components/workinfo'
import NoticeBar from '@/components/noticeBar'
import * as imageConversion from 'image-conversion'
import SparkMD5 from 'spark-md5'
import Login from '@/components/Login'
import PicToPicSearch from '@/components/PicToPicSearch'
import api from '@/api/api'
export default {
  name: 'v-header',
  props: {
    getIndex: 0,
  },
  components: { PicToPicSearch, Login, NoticeBar,gameInfo,articleInfo,workInfo},
  data() {
    return {
      placeHolderText:'搜索',
      pageTab:0,
      showmenuMask:false,
      isHiddenSideBar:false,
      textAnima:null,
      placeholderObj:null,
      curFullPath:'',
      showInfo:false,
      currentId:'',
      pageType:'',
      showFnew:false,
      showPlaceholder:false,
      hotWordsList:[],
      showLogin: false,
      visibleTrend: false,
      visible: false,
      searchTypeEnum: {
        'linggan': 'linggan',
        'articleImage': 'images',
        'discover': 'discover',
        'video': 'sortVideo',
        '': ''
      },
      cnName: {
        'linggan': '游戏',
        'images': '截图',
        'discover': '作品',
        'article': '文章',
        'sortVideo': '短视频',
        'explorer': '收藏夹',
        '': ''
      },
      pageInfoPathName: {
        'linggan': '/game/',
        'images': '/imgv/',
        'discover': '/work/',
        'article': '/article/',
        'sortVideo': '短视频',
        'explorer': '收藏夹',
        '': ''
      },
      homeTypeEnum: {
        'linggan': 'linggan',
        'images': 'articleImage',
        'discover': 'discover',
        'sortVideo': 'video',
        'explorer': 'explorer',
        '': ''
      },
      recommendlist: [],
      nums:{
          article: 0,//文章分类
          articleAll: 0,//总文章数
          discover:0,//发现分类
          draft:0,//文章草稿数
          explorerArticleCount:0,//图片集文件夹
          explorerImagesCount: 0,//图片文件夹数
          explorerTotalCount:0,//文件夹总数
          fansCount: 0,//粉丝
          linggan: 0,//灵感分类
          material: 0,//材质分类
          praisedCount: 0,//点赞数
          subscribeCount:0,//关注
          publishTotalCount: 0,
          sortVideoCount: 0,
          collectCount: 0
      },
      typeEnum: {
        linggan: { text: '游戏', classname: 'game' },
        discover: { text: '作品', classname: 'work' },
        article: { text: '文章', classname: 'article' },
        articleImage: { text: '截图', classname: 'jietu' },
        video: { text: '短视频', classname: 'video' },
        explorer: { text: '收藏夹', classname: 'explorer' }
      },
      showTrend: false,
      showNotice: false,
      isLogin: false,
      showBeSimliar: false,
      showLogin: false,
      fitCollections: [],
      tnpTab: 1,
      showPicToPic: false,
      showPicToPicPlugin: false,
      showColorPickerPlugin: false,
      color: '',
      isALREADYCLOSECUTPICTIP: false,
      isToggle: false,
      isEnableDarkAbsLayout: false,
      path: '',
      isNormalBl: false,
      isAsboluteLayout: false,
      isDetail: false,
      isNewLg: false,
      isParentMove: false,
      msgNum: 0,
      isDarkTheme: false,
      showNewHisSearch: false,
      keyword: '',
      collecFileTotalPage: 0,
      collecFiles: [],
      fileParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tabIndex: 1,
      keySelectIndex: -1,
      showSearchkeys: false,
      globalSearchkeys: [],
      isInspiration: false,
      isDefaultShow: false,
      isFocus: false,
      globalSearchKeyTitle: '全站内容',
      globalSearchKeyType: '',
      globalKeyword: '',
      logoPic: '',
      showInspiratioCnt: false,
      hotPic: require('@/assets/HOT.png'),
      defaultAvatar: require('../assets/pro/default_uimg.svg'),
      showInfo: false,
      hoverShow: false,
      categoryParam: {
        pageNum: 1,
        pageSize: 999,
        orderByColumn: 'sort',
        isAsc: 'asc',
      },
      categoryList: [],
      categoryGroup: {},
      navIndex: this.getIndex,
      list: [],
      msgTotal: 0,
      msgList: [],
      userInfo: {},
      getLogo: '',
      inspirationInfo: {
        imageNum: 0,
        content: '',
        articleNum: 0,
      },
      searchData: [],
      browserData: [],
      userStatisticsData: {
        article: 0, //文章分类
        articleAll: 0, //总文章数
        discover: 0, //发现分类
        draft: 0, //文章草稿数
        explorerArticleCount: 0, //图片集文件夹
        explorerImagesCount: 0, //图片文件夹数
        explorerTotalCount: 0, //文件夹总数
        fansCount: 0, //粉丝
        linggan: 0, //灵感分类
        material: 0, //材质分类
        praisedCount: 0, //点赞数
        subscribeCount: 0, //关注
      },
      searchAni:{
        timout1:null,
        timout2:null,
        timout3:null,
        timout4:null,
        text:"搜索游戏、作品、收藏夹、文章...",
        charIndex:0,
        isTyping:true,
        typingDelay:200,
        erasingDelay:100,
        newTextDelay:600
      }
    }
  },
  watch: {
    '$route': function (old, now) {
      this.isFocus = false;

      let _keyword = this.$route.query.k;
      let _t = this.$route.query.t;
      // this.globalSearchKeyType=this.searchTypeEnum[_t];

      let _type = this.searchTypeEnum[_t];
      this.globalKeyword = _keyword;
      this.getHisData();
    },
    isFocus:{
      handler(newd,old){
        if(newd||this.currentId){
          document.body.style.overflow='hidden';
        }else{
          document.body.style.overflow='inherit';
        }
      }
    }
  },
  async mounted() {
    let logPic = localStorage.getItem('LOGO-PIC')
    if (logPic) {
      this.logoPic = logPic;
    }
    if(!localStorage.getItem('isclearcach')&&(!!localStorage.getItem('token')||!!localStorage.getItem('userId')||!!localStorage.getItem('userInfo')))
    { 
      localStorage.setItem('isclearcach',true);
      localStorage.removeItem('token');
      localStorage.removeItem('userId');
      localStorage.removeItem('userInfo');
      this.$amessage.success('系统版本已更新,请重新登录～');
      setTimeout(()=>{
        location.href='/';
      },1500)
      return;
    }
    if(this.$route.query.t){
      this.pageTab=this.$route.query.t;
    }else{
      if(this.$route.name=='games'){
        this.pageTab=1;
      }else{
        this.pageTab=0;
      }
    }
    if(localStorage.getItem('I-HD-SD')){
      this.isHiddenSideBar=localStorage.getItem('I-HD-SD');
    }
    else{
      this.isHiddenSideBar=true;
    }
    // if(this.searchAni.timout1){
    //   clearTimeout(this.searchAni.timout1);
    // }
    // if(this.searchAni.timout2){
    //   clearTimeout(this.searchAni.timout2);
    // }
    // if(this.searchAni.timout3){
    //   clearTimeout(this.searchAni.timout3);
    // }
    // if(this.searchAni.timout4){
    //   clearTimeout(this.searchAni.timout4);
    // }
    // if(this.textAnima){
    //   // this.searchAni={
    //   //     timout1:null,
    //   //     timout2:null,
    //   //     timout3:null,
    //   //     timout4:null,
    //   //     text:"搜索游戏、作品、收藏夹、文章...",
    //   //     charIndex:0,
    //   //     isTyping:true,
    //   //     typingDelay:200,
    //   //     erasingDelay:100,
    //   //     newTextDelay:600
    //   // }
    //   clearTimeout(this.textAnima);
    //   const typingElement = document.querySelector('.typing');
    //   typingElement.textContent='';
    // }
    // this.textAnima=setTimeout(this.autoAnimatText, this.searchAni.newTextDelay);

    if(!localStorage.getItem('HED-NYD')){
      this.showFnew=true;
    }
    let _keyword = this.$route.query.k;
    let _t = this.$route.query.t;
    if (_keyword) {
      // const placeholderText = document.querySelector('.placeholder-text');
      // placeholderText.style.display = 'none';
      // this.showPlaceholder=true;
      this.globalKeyword = _keyword;
    }

    let that=this;

    let token = window.localStorage.getItem('token')
    if (token) {
      this.isLogin = true;

      let user = JSON.parse(decodeURIComponent(localStorage.getItem('BSIC')));
      this.userInfo = user;

      // let res = await api.getMemberArticleAndExplorerStatistics(user.id);
      // this.nums = res.data;

      api.getMemberArticleAndExplorerStatistics(user.id).then(res=>{
        that.nums = res.data;
      })

      this.fetchUser();
      // this.fetchMessageCount()
      // this.getMessageList()
    }
    let res = await api.getFitCollections();  //热门精选
    if (res.code == 0) {
      this.fitCollections = res.data
    }
    this.getHisData();

    res = await api.getRecommendPics();
    // 正则将 http 转换为 https
    res.data.forEach(item => {
      item.image = item.image.replace(/^http:\/\//i, 'https://')
    })
    this.recommendlist = res.data;

    // res =  await api.hotWords({showAll:true,pageNum:1,pageSize:30})
    res = await api.getHomeHots({pageSize:11});
		this.hotWordsList=res.data.searchs.list;

    document.addEventListener('paste', this.onPaste);

    document.addEventListener('keypress', (e)=>{
      if(e.key=='/'){
        // if($('.pro-header .search-bx form').is(':hidden')){
        //   $('.pro-header .search-bx form').show();
        // }
        that.handleShowSearch();
      }
    });

    this.$nextTick(()=>{
      that.placeholderObj=document.querySelector('#placeholder_text');
    })
  },
  methods: {
    toPubPage(_url){
      // $('#app').removeClass('info-detail-page');
      this.$router.push({path:_url})
    },
    toEdit(){
      // $('#app').removeClass('is-game');
      // // $('#app').removeClass('info-detail-page');
      // this.$router.push({path:'/personal/personalData'})
      let routeData=this.$router.resolve({ path:'/personal/personalData'})
      window.open(routeData.href, '_self');
    },
    handleHidden(){
      $('#app').removeClass('fix-sid-bar');
      document.body.style.overflow='inherit';
    },
    handleSwitch(){
      let _theme=this.$store.state.theme=='dark'?'light':'dark';
      $('them-area a[class='+_theme+']').addClass('active').siblings().removeClass('active');
      $('html').removeClass('dark').removeClass('light').addClass(_theme);
      this.$store.dispatch('setTheme',_theme)
      localStorage.setItem('THM-STY',_theme);
    },
    handleCollApseSidbar(){
      // let isInfo=this.$route.name=='game'||this.$route.name=='work'||this.$route.name=='article'||this.$route.name=='publishGame'||this.$route.name=='publishWork'||this.$route.name=='publishVideo';
      // if(isInfo){
      $('#app').addClass('fix-sid-bar');
      this.showmenuMask=true;
      document.body.style.overflow='hidden';
      // }else{
      //   if(this.isHiddenSideBar&&this.isHiddenSideBar!='false'){
      //     this.isHiddenSideBar=false;
      //     $('.layout-container').removeClass('hidden-sidbar');
      //     localStorage.setItem('I-HD-SD',this.isHiddenSideBar);
      //     this.$store.dispatch('setHiddenBar',this.isHiddenSideBar)
      //   }else{
      //     this.isHiddenSideBar=true;
      //     $('.layout-container').addClass('hidden-sidbar');
      //     localStorage.setItem('I-HD-SD',this.isHiddenSideBar);
      //     this.$store.dispatch('setHiddenBar',this.isHiddenSideBar)
      //   }
      // }
    },
    autoAnimatText() {
      if (this.searchAni.isTyping) {
        if(this.placeholderObj)
        {
          if(this.isFocus||this.globalKeyword||this.globalSearchKeyType)
          {
            this.placeholderObj.style.display = 'none';
            this.showPlaceholder=true;
          }
          else
          {
            this.placeholderObj.style.display = 'block';
            this.showPlaceholder=false;
          }
        }

        const typingElement = document.querySelector('.typing');
        if (this.searchAni.charIndex < this.searchAni.text.length) {
          typingElement.textContent += this.searchAni.text.charAt(this.searchAni.charIndex);
          this.searchAni.charIndex++;
          this.searchAni.timout1=setTimeout(this.autoAnimatText, this.searchAni.typingDelay);
        } else {
          this.searchAni.isTyping = false;
          this.searchAni.timout2=setTimeout(this.erase, this.searchAni.newTextDelay);
        }
      }
    },
    erase() {
      if (!this.searchAni.isTyping) {
        const typingElement = document.querySelector('.typing');
        if (this.searchAni.charIndex > 0) {
            typingElement.textContent = this.searchAni.text.substring(0, this.searchAni.charIndex - 1);
            this.searchAni.charIndex--;
            this.searchAni.timout3=setTimeout(this.erase, this.searchAni.erasingDelay);
        } else {
          this.searchAni.isTyping = true;
          this.searchAni.timout4=setTimeout(this.autoAnimatText, this.searchAni.typingDelay);
        }
      }
    },
    toPage(){
      if(this.$route.name=='Home'){
        $('body,html').animate({
          'scrollTop':0
        }, 0);
        this.$router.replace('/')
        setTimeout(()=>{
          location.reload();
        },300)
      }else{
        this.$router.push({path:'/'})
      }
    },
    onInfoClose() {
      window.history.pushState({}, 0, this.curFullPath);
      document.body.style.overflow = 'inherit';
      this.currentId='';
      this.showInfo = false;
    },
    changeKeyItem(item) {
      // this.isFocus=false;
      // this.curFullPath = this.$route.fullPath;
      // this.pageType=item.type;
      // this.currentId=item.id;

      // window.history.pushState({}, 0, this.pageInfoPathName[item.type]+item.id);
      // this.showInfo = true;
      let routeData = this.$router.resolve({
        path: this.pageInfoPathName[item.type]+item.id
      })
      window.open(routeData.href, '_blank')
      // this.$router.push({ path:  this.pageInfoPathName[item.type]+item.id})
    },
    handlCloseTop(){
      this.showFnew=false;
      localStorage.setItem('HED-NYD',false); 
    },
    loadUError(e){
      e.target.src=this.defaultAvatar;
      e.target.removeAttribute('srcset');
    },
    loadError(e){
      e.target.src=require('../assets/loading.png');
      e.target.removeAttribute('srcset');
    },
    onSearchBoxFocus(e){
      this.isFocus = true;

      this.showBeSimliar=false;
      // const placeholderText = document.querySelector('.placeholder-text');
      // placeholderText.style.display = 'none';
      // this.showPlaceholder=true;
    },
    handleClear(){
      // const placeholderText = document.querySelector('.placeholder-text');
      // placeholderText.style.display = 'block';
      // this.showPlaceholder=false;
      this.globalKeyword = ''; 
      this.globalSearchkeys = [];
      this.$router.replace({ path: '/searchs?t=' + this.globalSearchKeyType })
    },
    handleShowSearch(){
      this.isFocus=true;
      this.showBeSimliar=false;
      setTimeout(()=>{
        $('#top_global_searchbox').focus();
      },200)
    },
    goSearchByHotKey(_title){
      $('#app .pro-header .search-bx form').css('display','flex');
      // const placeholderText = document.querySelector('.placeholder-text');
      // placeholderText.style.display = 'none';
      // this.showPlaceholder=true;
      this.$router.push({path:'/searchs?k='+_title+'&t='})
    },
    toGamePageByStyle(item){
      if(item){
        let that=this;
        if(this.$route.name!='Home'){
          this.$router.push({path:'/games?t=1&style='+item.name})
        }
        else{
          this.$router.replace({path:'/games?t=1&style='+item.name})
        }
        //this.$router.replace({path:'/?t=22'+item.name})
      }else{
        this.$router.replace({path:'/games'})
      }
    },
    handleShowNotice() {
      this.$refs['refNotice'].visible = true;
    },
    onPaste(e) {
      if(!this.isFocus)return;
      if (e.clipboardData && e.clipboardData.files && e.clipboardData.files.length > 0 && e.clipboardData.files.length == 1) {
        if (e.clipboardData.files[0].type.indexOf('image') < 0) {
          this.$amessage.error( '请复制图片后粘贴至此' )
          return;
        }
        let _file = e.clipboardData.files[0];
        this.pictureBefore({ file: _file })
      }
    },
    onInputFileSearch(e) {
      let imgurl = e.target.value;
      let that = this;
      if (imgurl) {
        new Promise(function (resolve, reject) {
          var ImgObj = new Image();
          ImgObj.src = imgurl;
          ImgObj.onload = function (res) {
            that.handleUrlToSearch(imgurl);
          }
          ImgObj.onerror = function (err) {
            that.$amessage.error('图片链接无效')
          }
        })
      }
    },
    onOndragLeave(e) {
      this.isDrag = false;
      e.preventDefault();
    },
    onOndragEnter(e) {
      // this.isDrag=true;
      e.preventDefault();
    },
    onOndragover(e) {
      this.isDrag = true;
      e.preventDefault()
    },
    async onDrop(e) {
      // this.isDrag=true;
      e.preventDefault()
      if (e.dataTransfer.files.length > 0) {
        let file = e.dataTransfer.files[0];
        this.pictureBefore({ file: file });
      }
    },
    pictureBefore(file) {
      let that = this;
      that.isAgain = false;
      that.isSearching = true;
      var reader = new FileReader();
      var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
      var spark = new SparkMD5.ArrayBuffer();
      var reader = new FileReader(); //创建读取文件的方法
      imageConversion.compressAccurately(file.file, 1023).then(cpresFile => {
        reader.readAsArrayBuffer(blobSlice.call(cpresFile));
        reader.onload = async function (e) {
          const image = new Image();
          image.src = URL.createObjectURL(new Blob([e.target.result]));
          const canvas = document.createElement('canvas');
          const context = canvas.getContext('2d');
          image.onload = () => {
            canvas.width = image.width
            canvas.height = image.height
            context.drawImage(image, 0, 0)
            const base64 = canvas.toDataURL('image/jpeg')
            localStorage.setItem('tmp_im_b64', base64);
            that.isFocus = false;
            if (that.$route.name == 'searchByImageList') {
              location.href='/searchByImageList?t='+Date.parse(new Date())
            } else {
              that.$router.push({ path: '/searchByImageList?t='+Date.parse(new Date()) })
            }
          }
          return;
          let _fdata = new FormData();

          _fdata.append('file', cpresFile);
          let res = await api.uploadImg(_fdata);
          if (res.data) {
            let url = res.data;
            spark.append(e.target.result);

            let formdata = new FormData();
            formdata.append('file', cpresFile);
            // formdata.append('image',cpresFile);
            formdata.append('pageNum', '1')
            //formdata.append('page','1')
            formdata.append('pageSize', '1')
            res = await api.imgToImgUpload(formdata);
            var tmp_md5 = spark.end();
            that.isFocus = false;
            if (that.$route.name == 'searchByImageList') {
              that.$router.replace({ path: '/searchByImageList?sign=' + tmp_md5 + '&surl=' + url })
            } else {
              that.$router.push({ path: '/searchByImageList?sign=' + tmp_md5 + '&surl=' + url })
            }
          } else {
            that.isSearching = false;
          }
        }
      });

      // let url='https://image.gameuiux.cn/2021/03/17/73b4bd712cace08b48c5961818c2f073_list.jpg';
      //  //方法二
      // let canvas = document.createElement('canvas');
      // let img = document.createElement('img');
      // // 解决跨域 Canvas 污染问题

      // img.setAttribute("crossOrigin", 'Anonymous');
      // img.onload = function (e) {
      //     canvas.width = img.width;
      //     canvas.height = img.height;
      //     let context = canvas.getContext('2d');
      //     //绘制图片
      //     context.drawImage(img, 0, 0, img.width, img.height);
      //     canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
      //     //将canvas转base64码，然后创建一个a连接自动下载图片
      //     canvas.toBlob((blob) => {
      //         var reader = new FileReader();
      //         var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
      //         var spark = new SparkMD5.ArrayBuffer();
      //         var reader = new FileReader(); //创建读取文件的方法
      //         reader.readAsArrayBuffer(blobSlice.call(blob));
      //         reader.onload = async function(e) {
      //             spark.append(e.target.result);

      //             let formdata=new FormData();
      //             formdata.append('file',blob);
      //             formdata.append('pageNum','1')
      //             formdata.append('pageSize','1')
      //             let res=await api.imgToImgUpload(formdata);
      //             var tmp_md5 = spark.end();
      //             that.$router.push({path:'/searchForPictures?sign='+tmp_md5})
      //         }
      //     }, "image/jpeg");
      // }
      // //将资源链接赋值过去，才能触发img.onload事件
      // img.src = url


      // let formdata=new FormData();
      // // formdata.append('file',file.file);
      // formdata.append('hash','b5d6d9a17388a618083564b87fdea554')
      // formdata.append('pageNum','1')
      // formdata.append('pageSize','10')
      // let res=await api.imgToImgUpload(formdata);
      // this.$emit('onsearch',res.data);
    },
    handleUrlToSearch(url) {
      let that = this;
      //方法二
      let canvas = document.createElement('canvas');
      let img = document.createElement('img');
      // 解决跨域 Canvas 污染问题

      img.setAttribute("crossOrigin", 'Anonymous');

      that.isSearching = true;

      that.isFocus = false;
      img.onload = function (e) {
        canvas.width = img.width;
        canvas.height = img.height;
        let context = canvas.getContext('2d');
        //绘制图片
        context.drawImage(img, 0, 0, img.width, img.height);
        canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

        const base64 = canvas.toDataURL('image/jpeg')
        localStorage.setItem('tmp_im_b64', base64);
        that.isFocus = false;
        if (that.$route.name == 'searchByImageList') {
          location.href='/searchByImageList?t='+Date.parse(new Date())
        } else {
          that.$router.push({ path: '/searchByImageList?t='+Date.parse(new Date()) })
        }
        return;
        //将canvas转base64码，然后创建一个a连接自动下载图片
        canvas.toBlob((blob) => {
          var reader = new FileReader();
          var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
          var spark = new SparkMD5.ArrayBuffer();
          var reader = new FileReader(); //创建读取文件的方法
          reader.readAsArrayBuffer(blobSlice.call(blob));
          reader.onload = async function (e) {
            spark.append(e.target.result);
            let formdata = new FormData();
            formdata.append('file', blob);
            formdata.append('pageNum', '1')
            formdata.append('pageSize', '1')
            let res = await api.imgToImgUpload(formdata);
            var tmp_md5 = spark.end();

            that.isFocus = false;
            if (that.$route.name == 'searchByImageList') {
              that.$router.replace({ path: '/searchByImageList?sign=' + tmp_md5 + '&surl=' + url })
            } else {
              that.$router.push({ path: '/searchByImageList?sign=' + tmp_md5 + '&surl=' + url })
            }
          }
        }, "image/jpeg");
      }
      //将资源链接赋值过去，才能触发img.onload事件
      img.src = url
    },
    toUserCenter() {
      let routeData=this.$router.resolve({ path: '/user/' + this.userInfo.id})
      window.open(routeData.href, '_self');
      // $('#app').removeClass('is-game');
      // this.$router.push({ path: '/user/' + this.userInfo.id })
    },
    handleTypeBy(_type) {
      this.globalSearchKeyType = _type;
      // const placeholderText = document.querySelector('.placeholder-text');
      // placeholderText.style.display = 'none';
      // this.showPlaceholder=true;
    },
    version() {
      let date = new Date();
      return date.getTime()
    },
    get_avatar_url(member = { id: '', avatar: '' }, n = 1, w = 30) {
      if (!member.id || !member.avatar) return this.defaultAvatar
      let hash = SparkMD5.hash(member.avatar).slice(0, 6)
      return `https://img.gameui.net/avatar-${member.id}-${hash}@${n}x${w}.webp`
    },
    get_avatar_urls(member = { id: '', avatar: '' }, w = 30) {
      return `${this.get_avatar_url(member, 1, w)} 1x, ${this.get_avatar_url(member, 2, w)} 2x, ${this.get_avatar_url(member, 3, w)} 3x`
    },
    base64(str) {
      return Buffer.from(str).toString('base64').replace(/\//g, '%2F')
    },
    handleSearchByPic() {
      let token = window.localStorage.getItem('token')
      if (!token) {
        this.$parent.showLogin({ loginType: 0 })
        return
      }
      this.showPicToPic = true
    },
    onPicSearch(list) {
      this.showPicToPic = false
    },
    handleCloseCutPic() {
      localStorage.setItem('ALREADY-CLOSE-CUTPIC-TIP', 0)
      this.isALREADYCLOSECUTPICTIP = false
    },
    handleClearCenterGlobal() {
      this.globalKeyword = ''
      this.globalSearchkeys = []
      this.$parent.$children[1].handleClearGlobalInput()
    },
    changeByInspiration(_type) {
      if (_type == 1) {
        this.globalSearchKeyTitle = '游戏'
        this.globalSearchKeyType = 'linggan'
      } else {
        this.globalSearchKeyTitle = '截图'
        this.globalSearchKeyType = 'articleImage'
      }

      let cmpComponents = this.$parent.$children
      cmpComponents.map((cel) => {
        if (cel.changeFilterCapType) {
          cel.changeFilterCapType(_type, true)
        }
      })
    },
    changeByInspirationStatic(_type) {
      if (_type == 1) {
        this.globalSearchKeyTitle = '游戏'
        this.globalSearchKeyType = 'linggan'
      } else {
        this.globalSearchKeyTitle = '截图'
        this.globalSearchKeyType = 'articleImage'
      }
    },
    onScroll(e) {
      let spacNum = e.target.scrollHeight - ($(e.target).scrollTop() + $(e.target).height())
      if (spacNum < 1 && this.collecFileTotalPage != this.fileParams.pageNum) {
        this.fileParams.pageNum++
        this.queryCollecFileList()
      }
    },
    onSearchParentMover() {
      this.isParentMove = true
    },
    handleShowFavItems(e) {
      let that = this
      if (that.isToggle == false) {
        that.isToggle = true
        $(e.target).next().show()
        let offset = $(e.target).next().offset()
        $('.other-mask')
          .css({ left: offset.left + 'px', width: $(e.target).next().width() + 'px', height: $(e.target).next().height() + 'px' })
          .show()
      } else {
        that.isToggle = false
        $(e.target).next().hide()
        $('.other-mask').hide()
      }
      e.stopPropagation()
    },
    onSearch() {
      let that = this
      setTimeout(function () {
        that.collecFiles = []
        that.fileParams.pageNum = 1
        that.fileParams.title = that.keyword
        that.queryCollecFileList()
      }, 300)
    },
    handleSwitchFile(_num) {
      this.tabIndex = _num
      this.fileParams.pageNum = 1
      this.collecFiles = []
      $('.other-mask').css({ height: $('.fav-wrap-items').height() + 'px' })
      this.queryCollecFileList()
    },
    async queryCollecFileList() {
      let result = {}
      if (this.tabIndex == 0) {
        this.fileParams.type = 0
        //result = await api.explorerList(this.fileParams);
      } else {
        this.fileParams.type = 1
        //delete this.fileParams.type;
        //result = await api.getMutiplePicFavs(this.fileParams);
      }
      this.fileParams.title = this.keyword
      result = await api.getNewFavFolds(this.fileParams)

      let old = this.collecFiles
      this.collecFiles = [...old, ...(result.data || [])]

      let rsnum = result.total % this.fileParams.pageSize
      let tnum = rsnum == 0 ? result.total / this.fileParams.pageSize : parseInt(result.total / this.fileParams.pageSize + 1)
      this.collecFileTotalPage = tnum

      this.$nextTick(() => {
        $('.other-mask').css({ height: $('.fav-wrap-items').height() + 'px' })
      })
    },
    handleSwitchTheme(e) {
      this.$parent.isDarkTheme = !this.$parent.isDarkTheme
      if (this.$parent.isDarkTheme) {
        localStorage.setItem('CUR-THEME', 'DARK')
        this.isDarkTheme = true
        $('body').addClass('gameui-dark-themem')
      } else {
        localStorage.removeItem('CUR-THEME')
        this.isDarkTheme = false
        $('body').removeClass('gameui-dark-themem')
      }
    },
    enterSearch() {
      this.isFocus = false;
      this.showSearchkeys = true;
      $('#topKeyBox').blur();
      this.handleGlobalSearch();
    },
    changeSearchKey(item) {
      this.globalKeyword = item.title
      //if(this.searchData.length==0||this.browserData.length==0)
      this.getHisData()
      this.nearHisAdd()

      let curPath = this.$route.path
      if ((this.globalSearchKeyType == 'linggan' || this.globalSearchKeyType == 'articleImage') && curPath == '/inspiration') {
        this.$parent.$refs['mainPage'].queryParams.title = this.globalKeyword
        this.$parent.$refs['mainPage'].curSearchKey = this.globalKeyword
        this.$parent.$refs['mainPage'].changeFilterCapType(this.globalSearchKeyTitle == '游戏' ? 1 : 2)
      } else if (this.globalSearchKeyType == 'images') {
        if (curPath == '/inspirationLg') {
          this.$parent.$refs['mainPage'].params.description = this.globalKeyword
          this.$parent.$refs['mainPage'].params.pageNum = 1
          this.$parent.$refs['mainPage'].hasMore = true
          this.$parent.$refs['mainPage'].list = []
          this.$parent.$refs['mainPage'].isPost = false
          this.$parent.$refs['mainPage'].scrollLoaded = false
          this.$parent.$refs['mainPage'].queryList()
        } else {
          let routeData = this.$router.resolve({
            path: '/inspirationLg?title=' + this.globalKeyword,
          })
          window.open(routeData.href, '_blank')
        }
      } else {
        let routeData = this.$router.resolve({
          path: '/search?keyword=' + encodeURIComponent(this.globalKeyword) + '&type=' + this.globalSearchKeyType,
        })
        window.open(routeData.href, '_blank')
      }
    },
    async handleBylikeSearch(e) {
      let that = this;
      if(that.globalKeyword){
        that.globalKeyword.trim();
      }
      if (!that.globalKeyword&& e.key != 'ArrowLeft' && e.key != 'ArrowRight') {
        this.globalSearchkeys = []
        this.showSearchkeys = true
        return
      }
      if (e.key == 'ArrowLeft' || e.key == 'ArrowRight') {
        that.globalSearchkeys = []
        return
      }
      if (e.key == 'ArrowUp' || e.key == 'ArrowDown') {
        if (e.key == 'ArrowUp') {
          //上翻
          if (that.keySelectIndex == 0) {
            that.keySelectIndex = that.globalSearchkeys.length - 1
          } else {
            that.keySelectIndex--
          }
        } else if (e.key == 'ArrowDown') {
          //下翻
          if (that.keySelectIndex == that.globalSearchkeys.length - 1) {
            that.keySelectIndex = 0
          } else {
            that.keySelectIndex++
          }
        }
        that.globalKeyword = that.globalSearchkeys[that.keySelectIndex].title
      } else {
        if (e.target.value) {
          let res = await api.globalLikeSearchKeywor({
            type: this.globalSearchKeyType,
            keyword: e.target.value,
            pageNum: 1,
            pageSize: 6,
          })
          that.keySelectIndex = -1
          if (res.code == 0) {
            res.data.forEach((item) => {
              item.content = item.title.replace(new RegExp(`\(${e.target.value}\)`), '<em>' + e.target.value + '</em>');
            })
            this.globalSearchkeys = res.data;
            this.showSearchkeys = false
          }
        } else {
          this.globalSearchkeys = []
          this.showSearchkeys = true
        }
      }
    },
    handleSearchByCommkey(str) {
      this.globalKeyword = str;
      // const placeholderText = document.querySelector('.placeholder-text');
      // placeholderText.style.display = 'none';
      // this.showPlaceholder=true;
      this.handleGlobalSearch();
    },
    removeHis(idx, str) {
      let hisSearchData = localStorage.getItem('NEARHISRESULT')
      hisSearchData = JSON.parse(hisSearchData)
      let removeTmpIdx = 0
      let removeIdx = -1
      hisSearchData.forEach((item) => {
        if (item == str) {
          removeIdx = removeTmpIdx
        }
        removeTmpIdx++
      })
      hisSearchData.splice(removeIdx, 1)
      this.searchData.splice(idx, 1)
      localStorage.setItem('NEARHISRESULT', JSON.stringify(hisSearchData))
    },
    toInfo(item) {
      let routeData = this.$router.resolve({
        path: '/articleDetails/' + item.id,
      })
      if (item.type == 2)
        routeData = this.$router.resolve({
          path: '/inspirationInfo/' + item.id,
        })
      window.open(routeData.href, '_blank')
    },
    getHisData() {
      let hisSearchData = localStorage.getItem('NEARHISRESULT')
      let hisBrowserData = localStorage.getItem('NEARBROWSERRESULT')
      if (hisSearchData) {
        hisSearchData = JSON.parse(hisSearchData)
        hisSearchData = hisSearchData.reverse()
      }
      if (hisBrowserData) {
        hisBrowserData = JSON.parse(hisBrowserData)
        hisBrowserData = hisBrowserData.reverse()
      }
      this.searchData = hisSearchData ? hisSearchData : []
      this.browserData = hisBrowserData ? hisBrowserData : []

      let isac = localStorage.getItem('ALREADY-CLOSE-CUTPIC-TIP')
      if (!isac || isac == 1) {
        this.isALREADYCLOSECUTPICTIP = true
      } else {
        this.isALREADYCLOSECUTPICTIP = false
      }
    },
    handleFocus() {
      this.isFocus = true
      this.showSearchkeys = false
    },
    handleGlobalSearch() {
      if (!this.globalKeyword) {
        this.$amessage.warn('请输入搜索关键词')
        return
      }
      $('#app .pro-header .search-bx form').css('display','flex');
      this.nearHisAdd();
      this.getHisData();
      this.isFocus = false;

      if(this.$route.name!='games'&&this.$route.name!='screenshots')
      {
        this.$router.push({ path: '/searchs?k=' + encodeURIComponent(this.globalKeyword) + '&t=' + this.globalSearchKeyType })
      }
      else{
        this.$parent.$refs.mainPage.scrollToSearch();
        this.$parent.$refs.mainPage.queryParams.title=this.globalKeyword;
        this.$parent.$refs.mainPage.handleSearch();
      }
    },
    nearHisAdd() {
      let that = this
      let nearHisResults = localStorage.getItem('NEARHISRESULT')
      if (!nearHisResults) nearHisResults = []
      else {
        nearHisResults = JSON.parse(nearHisResults)
      }
      let has = nearHisResults.filter((r) => {
        return r == that.globalKeyword
      })
      if (nearHisResults.length == 12) nearHisResults = nearHisResults.splice(1, nearHisResults.length)
      if (has.length == 0) {
        nearHisResults.push(that.globalKeyword)
      }
      localStorage.setItem('NEARHISRESULT', JSON.stringify(nearHisResults))
    },
    spanItemClick(_route) {
      window.location.href = location.protocol + '//' + location.host + _route
    },
    notTipInspirationCnt() {
      this.showInspiratioCnt = false
      localStorage.setItem('notTipInspirationCnt', true)
    },
    refreshActive() {
      let routeName = this.$route.name
      let queryId = this.$route.params.id
      let path = this.$route.path
      this.path = path
      this.showColorPickerPlugin = false
      this.showPicToPicPlugin = false
      if (!queryId) {
        if (routeName == 'searchforpictures' || routeName == 'inspiration') {
          this.showPicToPicPlugin = true
        }
        if (routeName == 'Home') {
          this.navIndex = 0
        } else if (routeName == 'findList') {
          this.navIndex = 3
        } else if (routeName == 'articleList') {
          this.navIndex = 2
        } else if (routeName == 'inspiration') {
          this.navIndex = 1
          this.showColorPickerPlugin = true
          let _filterCapType = this.$route.query.filterCapType
          if (_filterCapType) {
            this.globalSearchKeyTitle = _filterCapType == 1 ? '游戏' : '截图'
          }
        } else if (routeName == 'material') {
          this.navIndex = 4
        } else if (routeName == 'membersRank' || routeName == 'teamsRank') {
          this.navIndex = 5
        } else if (routeName == 'recruitHome' || routeName == 'job' || routeName == 'publishJob' || routeName == 'publishEpiboly') {
          this.navIndex = 6
        } else {
          this.navIndex = -1
        }
      }

      if (path == '/' || path == '/inspiration' || path == '/membersRank' || path == '/recruitHome' || path == '/job' || path == '/publishJob' || path == '/publishEpiboly' || path.indexOf('personalCenter') > -1 || path.indexOf('inspirationInfo') > -1) {
        this.isAsboluteLayout = true
        $(document.body).css('padding-top', '0px')
      } else {
        this.isAsboluteLayout = false
        $(document.body).css('padding-top', '78px')
      }

      if (path == '/membersRank' || path == '/recruitHome') {
        this.isNormalBl = true
      } else {
        this.isNormalBl = false
      }
    },
    setNavIndex(_idx) {
      this.navIndex = _idx
    },
    refreshLoginSucc() {
      this.showInfo = true
      this.getLogo = localStorage.getItem('logo') != undefined ? localStorage.getItem('logo') : ''
      this.fetchUser()
      this.fetchMessageCount()
    },
    toUpRoute(_routeName) {
      let token = window.localStorage.getItem('token')
      if (!token) {
        this.$parent.showLogin({ loginType: 0 })
        return
      }
      this.$router.push({ path: '/' + _routeName })
    },
    refreshLoginOut() {
      this.showInfo = false
      // this.$router.push({path:'/home'})
    },
    toSearch: function () {
      this.$router.push('/search')
    },
    handleShowLogin() {
      localStorage.removeItem('token');
      localStorage.removeItem('userId');
      localStorage.removeItem('userInfo');

      this.isFocus=false;

      this.showLogin = true;

      // this.touchToLoing(0)
      //$('#m-wins-new-login').show();
    },
    touchToNav: function (index) {
      if (index == 0) {
        this.$router.push('/')
      } else if (index == 6) {
        if (this.showInfo) {
          this.$router.push('/recruitHome')
        } else {
          this.$parent.showLogin({ loginType: 0 })
        }
      }
      this.navIndex = index
    },
    changeActive: function () {
      this.hoverShow = true
    },
    removeActive: function () {
      this.hoverShow = false
    },
    touchUser: function () {
      this.$emit('touchUser', '')
    },
    touchToLoing: function (index) {
      this.$emit('onShowLogin', { loginType: index })
    },
    toJob(_pathName) {
      if (_pathName != 'recruitHome' && _pathName != 'publishEpiboly') {
        let token = window.localStorage.getItem('token')
        if (!token) {
          this.$parent.showLogin({ loginType: 0 })
          return
        }
      }
      $('.menuBtn').removeClass('open')
      $('.js-modal-mask').removeClass('open')
      this.$router.push({ path: '/' + _pathName })
    },
    toPublishJob: function () {
      let token = window.localStorage.getItem('token')
      if (!token) {
        this.$emit('onShowLogin', { loginType: 0 })
        return
      }
      this.$router.push('/publishJob')
    },
    toProjectEpiboly: function () {
      this.$router.push('/projectEpiboly')
    },
    toPublishEpiboly: function () {
      this.$router.push('/publishEpiboly')
    },
    touchToTeam: function (index) {
      if (index == 0) {
        //我的作品
        this.$router.push({
          path: '/personalCenter/' + this.userInfo.id,
          query: {
            subtabIndex: 1,
          },
        })
      } else if (index == 10) {
        //我的关注
        this.$router.push({
          path: '/personalCenter/' + this.userInfo.id,
          query: {
            tabIndex: 10,
          },
        })
      } else if (index == 6) {
        // 我的收藏
        this.$router.push({
          path: '/personalCenter/' + this.userInfo.id,
          query: {
            tabIndex: 1,
          },
        })
      } else if (index == 3) {
        // 我的团队
        this.$router.push('/myTeam')
      } else if (index == 4) {
        // 修改资料
        this.$router.push('/editInfo')
      }
    },
    privateLetter: function () {
      this.msgNum = 0
      this.$router.push('/messageCenter?tab=4')
    },
    toArticleList(name) {
      if (name) {
        this.$router.push({
          name: 'articleList',
          query: {
            cate_id: name,
          },
        })
      } else {
        this.$router.push({
          name: 'articleList',
        })
      }
    },
    toFindList(name) {
      if (name) {
        this.$router.push({
          name: 'findList',
          query: {
            cate_id: name,
          },
        })
      } else {
        this.$router.push({
          name: 'findList',
        })
      }
    },
    hideBox() {
      let that = this
      setTimeout(function () {
        that.showNewHisSearch = false
      }, 1500)
    },
    toInspiration(name) {
      this.$router.push({
        path: '/inspiration',
        name: 'inspiration',
        query: {
          name: encodeURIComponent(name),
        },
      })
    },
    toMaterial(name) {
      this.$router.push({
        path: '/material',
        name: 'material',
        query: {
          name: encodeURIComponent(name),
        },
      })
    },
    addWorks: function () {
      this.$router.push('/addWorks')
    },
    addArticle: function () {
      this.$router.push('/addArticle')
    },
    addInspiration: function () {
      this.$router.push('/addInspiration')
    },
    addMaterial: function () {
      this.$router.push('/addMaterial')
    },
    membersRank: function () {
      this.$router.push('/membersRank')
    },
    async getMessageList() {
      let that=this;
      let params = {
        isAsc:'asc',
        pageNum:1,
        pageSize:10,
        sendStatus:0
      }
      let res = await api.noticesList(params);
      res.data.forEach((m) => {
        if (m.type != 0) {
          // m.content = that.$bhelper.replace_em(m.content)
        }
      });
      this.msgList = res.data;
    },
    // 未读通知数量
    async fetchMessageCount() {
      let that = this
      let params = { sendStatus: 0 }
      let res = await api.unreadStatistics(params)
      if (res.code == 0) {
        that.msgTotal = res.data.all
        that.msgNum = res.data.message
      } else {
        if (res.responseText) {
          let error = JSON.parse(res.responseText)
          if (error.code == 500) {
            that.showInfo = false
          }
        }
      }
    },
    // 获取用户信息
    async fetchUser() {
      let that = this
      let res = await api.getUserInfo()

      if (res.code == 0) {
        that.userInfo = res.data
        localStorage.setItem('userInfo', JSON.stringify(res.data))
      } else {
        if (res.responseText) {
          let error = JSON.parse(res.responseText)
          if (error.code == 500) {
            that.showInfo = false
          }
        }
      }
    },
    // 退出登录
    touchToOut: function () {
      // let _theme = localStorage.getItem('CUR-THEME')
      // let _NEARBROWSERRESULT = localStorage.getItem('NEARBROWSERRESULT')
      // let _NEARHISRESULT = localStorage.getItem('NEARHISRESULT')

      localStorage.removeItem('token');
      localStorage.removeItem('userId');
      localStorage.removeItem('userInfo');
      localStorage.removeItem('BSIC');
      localStorage.removeItem('bind_type');
      localStorage.removeItem('type');

      // window.sessionStorage.clear()
      // localStorage.clear()

      // if (_theme) {
      //   localStorage.setItem('CUR-THEME', _theme)
      // }
      // if (_NEARBROWSERRESULT) {
      //   localStorage.setItem('NEARBROWSERRESULT', _NEARBROWSERRESULT)
      // }
      // if (_NEARHISRESULT) {
      //   localStorage.setItem('NEARHISRESULT', _NEARHISRESULT)
      // }
      this.$amessage.success('退出登录~');
      // let width = $(document.body).width()
      // if (width < 1360) {
      //   $('.menuBtn,.nav').removeClass('open')
      // }
      // this.$emit('onLoginOut', {})
      // location.reload()
      this.isLogin = false;
      setTimeout(function () {
          location.reload();
      }, 1200)
    },
    touchToUser: function () {
      this.$router.push('/personalCenter/' + this.userInfo.id)
    },
    touchTeam: function () {
      this.$router.push('/myTeam')
    },
  }
}
</script>

<style scoped lang="less">
/* .fright .g-top{
  opacity:1 !important;
} */
.pro-main-mask {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  height: 100%;
  z-index: 9999;
  // background: rgba(0, 0, 0, 0.6);
  // backdrop-filter: saturate(180%) blur(16px);
  // animation:opacity .2s linear;
}

.pro-header {
  // height: 84px;
  height:84px;
  // position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 115;
  // padding-left: 240px;
  // max-width: 1920px;
  margin: 0 auto;
  // padding-left:32px;

  font-size: 16px;
  display: flex;
  
  align-items: flex-start;
  padding-top:18px;

  justify-content: space-between;
  padding-right:40px;

  @keyframes shine {
      0% {
          left: -100%;
      }
      35% {
          left: 100%;
      }
      100% {
          left: 100%;
      }
  }

  .hed-left{
    display: flex;
    align-items: center;
    // padding-left:32px;
    min-width:159px;
    margin-left:32px;
    margin-right:30px;
  }
  .col-side-bar{
    min-width:32px;
    height:32px;
    max-width:32px;
    border-radius:9px;
    background-image:url('../assets/pro/collapse_menu.svg');
    background-repeat:no-repeat;
    background-position: center;
    background-size:20px;
    margin-right:7px;
    // margin-top:10px;
    transition:.1s all linear;
    &:hover{
      background-color:#242327;
    }
  }
  .search-box {
      width: 100%;
      height: 100%;
      background: transparent;
      border: none;
      padding: 0 45px;
      color: #fff;
      font-size: 16px;
      outline: none;
      position: relative;
      z-index: 1;
  }

  .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(255, 255, 255, 0.5);
      pointer-events: none;
      z-index: 2;
  }

  .camera-icon {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 2;
  }

  .placeholder-text {
      position: absolute;
      left: 45px;
      top: 50%;
      font-size:14px;
      transform: translateY(-50%);
      color: #6A6A80;
      pointer-events: none;
      white-space: nowrap;
      z-index:1;
  }

  .typing {
      position: relative;
  }

  .typing::after {
      content: '';
      position: absolute;
      right: -2px;
      top: 0px;
      height: 100%;
      width: 2px;
      background: rgba(255, 255, 255, 0.5);
      animation: blink 1s step-end infinite;
  }

  @keyframes blink {
      50% {
          background: transparent;
      }
  }

  .search-container:hover .camera-icon {
      color: rgba(255, 255, 255, 0.8);
  }

  .search-box:focus + .search-icon {
      color: rgba(255, 255, 255, 0.8);
  }

  .sys-logo {
    // height: 84px;
    display: inline-block;
    // min-width: 240px;
    min-width:120px;
    // margin-right:60px;
    display: flex;
    align-items: center;
    // padding-left: 41px;
    img{
      width:120px;
      // width:100%;
      height:auto;
      object-fit: contain;
    }
  }

  .search-bx {
    position: relative;
    width: 100%;
    width: 100%;

    // max-width:892px;
    .cancel-search {
      background: url('../assets/pro/cancel_search.svg');
      width: 20px;
      height: 20px;
      margin-right:11px;
      // position: absolute;
      // top: 14px;
      // right: 70px;
    }

    form {
      position: relative;
      display: flex;
      align-items: center;
      transition: .2s border linear;
      // input.active{
      //   border:1px solid #11CCB1;
      // }
      overflow: hidden;
      height: 47px;
      background-image: url('../assets/pro/header/search_icon.svg');
      background-repeat: no-repeat;
      background-position: 13px center;

      border-radius: 47px;
      // background-color: #242327;
      padding-left: 33px;
      border:1px solid #242327;

      &.active {
        border: 1px solid #11CCB1;
      }

      .search-by-type {
        background: #3D3C40;
        color: #fff;
        line-height: 35px;
        border-radius: 18px;
        // position: absolute;
        // left:8px;
        // top:6px;
        // width:120px;
        font-size: 14px;
        padding-left: 43px;
        display: flex;
        white-space: nowrap;
        align-items: center;

        .cancel-by-type {
          width: 18px;
          height: 18px;
          background-image: url('../assets/pro/clear_by_type.svg');
          background-repeat: no-repeat;
          margin: 0px 9px;
          transition: .1s all linear;

          &:hover {
            opacity: .8;
          }
        }
      }

      &.jietu {
        .search-by-type {
          background-image: url('../assets/pro/searchtype/button_normal_jietu.svg');
          background-repeat: no-repeat;
          background-position: 17px center;
        }
      }

      &.game {
        .search-by-type {
          background-image: url('../assets/pro/searchtype/button_normal_game.svg');
          background-repeat: no-repeat;
          background-position: 17px center;
        }
      }

      &.work {
        .search-by-type {
          background-image: url('../assets/pro/searchtype/button_normal_work.svg');
          background-repeat: no-repeat;
          background-position: 17px center;
        }
      }

      &.article {
        .search-by-type {
          background-image: url('../assets/pro/searchtype/button_normal_article.svg');
          background-repeat: no-repeat;
          background-position: 17px center;
        }
      }

      &.video {
        .search-by-type {
          background-image: url('../assets/pro/searchtype/button_normal_video.svg');
          background-repeat: no-repeat;
          background-position: 17px center;
        }
      }

      &.explorer {
        .search-by-type {
          background-image: url('../assets/pro/leftNav/button_normal_sc.svg');
          background-repeat: no-repeat;
          background-position: 17px center;
        }
      }

      &.has-pdl {
        background-image: none;
        padding-left: 8px;
      }

      // &:after{
      //   content: '';
      //     position: absolute;
      //     top: 0;
      //     left: -100%;
      //     width: 40%;
      //     height: 100%;
      //     background: linear-gradient(
      //         90deg,
      //         transparent,
      //         rgba(125, 125, 125, 0.05),
      //         rgba(125, 125, 125, 0.08),
      //         rgba(125, 125, 125, 0.05),
      //         transparent
      //     );
      //     animation: shine 8s ease-in-out infinite;
      //     animation-delay: 2s;
      // }
    }

    input {
      height: 26px;
      // background-color: #242327;
      // color:#848393;
      border: none;
      padding-left: 15px;
      color: #fff;
      width: 100%;
      font-size: 14px;
    }
    .xg-kj{
      width:20px;height:22px;
      background: url('../assets/pro/xg_icon.svg');
      margin-right:11px;
      transition:.1s all linear;
      &:hover{
        background: url('../assets/pro/xg_icon_hover.svg');
      }
    }
    .rig-funs{
      position: absolute;
      right: 20px;
      top:10.5px;
      display: flex;
      align-items: center;
      /deep/ .el-popover__reference-wrapper{
        display: flex;
      }
    }
    .pic-to-pic {
      width: 26px;
      height: 26px;
      background: url('../assets/pro/header/pic_to_pic_icon.svg');
      display: block;
      
    }
    .pro-search-full-box {
      position: absolute;
      left: 0px;
      right: 0px;
      top: 47px;
      padding-top: 11px;
      animation:hdpanel 0.3s ease forwards;

      // box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);

      .psf-wrap {
        background: #1C1C1E;
        border-radius: 16px;
        padding: 20px;
        color: #fff;

        .yd-types {
          margin-bottom: 40px;
          display: flex;
          grid-gap:16px;
          a {
            line-height: 38px;
            padding: 0px 21px;
            background: #242327;
            display: inline-block;
            // margin-right: 16px;
            border-radius: 19px;
            font-size: 16px;
            // font-weight:600;
            user-select: none;
            white-space: nowrap;
            transition: .2s all linear;

            &:active {
              // opacity:.8;
            }

            &:hover {
              background: #3D3C40;
            }
          }
        }

        .search-s-tit {
          font-size: 14px;
          color: #969696;
          line-height: 20px;
          margin-bottom: 10px;
        }

        .pro-near-searchs {
          margin-bottom: 30px;
          display: flex;
          grid-gap:16px;
          flex-wrap:wrap;
          a {
            line-height: 38px;
            padding: 0px 21px;
            background: #242327;
            display: inline-block;
            // margin-right: 16px;
            border-radius: 19px;
            font-size: 14px;
            font-weight: 600;
            max-width: 150px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            transition: .2s all linear;

            &:hover {
              background: #3D3C40;
            }
          }
        }

        .pro-hot-searchs {
          margin-bottom: 30px;
          display: flex;
          grid-gap:16px;
          flex-wrap:wrap;
          a {
            line-height: 38px;
            padding: 0px 21px;
            background: #242327;
            display: inline-block;
            // margin-right: 16px;
            border-radius: 19px;
            font-size: 14px;
            transition: .2s all linear;
            // font-weight:600;
            &:hover{
              background: #3D3C40;
            }
          }
        }

        .pro-hot-concentration {
          .pro-hot-container {
            max-width: 820px;
            display: flex;
            flex-wrap: wrap;
            grid-gap:10px;
          }

          a {
            // width: 197.29px;
            width:calc((100% - 30px) / 4);
            height: 58px;
            // margin-right: 10px;
            border-radius: 8px;
            position: relative;
            display: inline-block;
            overflow: hidden;
            transition:.1s all linear;
            margin-bottom: 10px;

            &:nth-child(4n) {
              margin-right: 0px;
            }

            span {
              line-height: 58px;
              text-align: center;
              position: relative;
              z-index: 1;
              // font-weight:600;
              font-size: 14px;
              display: inline-block;
              width: 100%;
            }

            img {
              position: absolute;
              left: 0px;
              top: 0px;
              right: 0px;
              filter: blur(4px);
              opacity:.5;
              // width:100%;
              // height:100%;
              // object-fit: cover;
            }
            &:not(.see-all):hover{
              img{
                opacity:.3;
              }
            }
          }

          .see-all {
            line-height: 58px;
            text-align: center;
            background: #242327;
            // font-weight:600;
            font-size: 14px;
            &:hover{
              background:#3D3C40;
            }
          }
        }

        .pro-search-result {
          .result-item {
            padding: 0px 3px;
            height: 78px;
            display: flex;
            align-items: center;
            border-radius: 8px;
            padding-right: 22px;
            user-select: none;
            color: #fff;

            &:hover {
              background: #242327;
            }

            &.selected-key {
              background: #242327;
            }

            .img-box {
              min-width: 70px;
              margin-right: 11px;
              width: 70px;
              height: 50px;
              border-radius: 8px;
              overflow: hidden;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }

            .basic {
              width: 100%;

              .title-wrap {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .title {
                  font-size: 16px;

                  // font-weight:600;
                  ::v-deep em {
                    color: #11CCB1;
                    // margin:0px 4px;
                    font-style: normal;
                  }
                }

                .type {
                  font-size: 12px;
                  color: #969696;
                  line-height: 22px;
                  border-radius: 4px;
                  border: 1px solid #969696;
                  padding: 0px 7px;
                }
              }

              .catre {
                color: #969696;
                font-size: 14px;
                margin-top: 6px;
                line-height: 20px;
              }
            }
          }
        }
      }

      .be-simliar {
        display: flex;
        position: relative;

        .close-be-simliar {
          position: absolute;
          width: 18px;
          height: 18px;
          position: absolute;
          right: 10px;
          top: 10px;
          background: url('../assets/pro/close-win.svg') no-repeat;
          background-size: cover;
          transition:.2s all linear;
          &:hover{
            transform: rotate(180deg);
          }
        }

        .bs-layout-left-img {
          min-width: 656px;
          height: 517px;
          margin-right: 33px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .bs-layout-fun {
          width: 100%;

          .title {
            width: 170px;
            height: 41px;
            background: url('../assets/pro/smlike_text.svg') no-repeat;
            background-size: cover;
            margin: 0 auto;
            margin-top: 25px;
          }

          .small-tip {
            color: #969696;
            margin: 29.46px 0px 39.17px 0px;
            font-size: 14px;
            text-align: center;
          }

          .upload-area-wrap {
            max-width: 539px;
            height: 211px;
            box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.2);
            border-radius: 20px;
            border: 2px dashed rgba(255, 255, 255, 0.14);
            margin: 0 auto;
            padding-top: 38.37px;
            background-image: url('../assets/pro/smlike_transfer.svg');
            background-size: 123px 63px;
            background-repeat: no-repeat;
            background-position: 90% center;
            transition:.1s all linear;
            &:hover{
              border-color: #11CCB1;
            }

            .upload-btn {
              width: 157px;
              height: 61px;
              background: url('../assets/pro/smlike_uploadbtn.svg') no-repeat;
              background-size: cover;
              display: block;
              margin: 0 auto;
              margin-bottom: 26.15px;
              transition:.1s all linear;

              &:hover{
                border-color:#11CCB1;
                background: url('../assets/pro/smlike_transfer_hover.svg') no-repeat;
                background-size: cover;
              }
              ::v-deep {

                .el-upload,
                .el-upload__input {
                  width: 100%;
                  height: 100%;
                }
              }
            }

            .fun-text {
              font-size: 16px;
              color: #fff;
              font-weight: 500;
              width: 116px;
              display: block;
              text-align: center;
              margin: 0 auto;
            }
          }

          .other-tip {
            margin-top: 39.16px;
            font-size: 12px;
            color: #969696;
            text-align: center;
            margin-bottom: 10.07px;
          }

          .other-sys-imgs {
            display: flex;
            justify-content: center;

            img {
              width: 80px;
              height: 60.21px;
              object-fit: cover;
              margin-right: 10px;
              border-radius: 8px;
              cursor: pointer;
              &:hover{
                transform:scale(1.1);
              }
            }
          }
        }
      }
    }
  }

  .hr-area {
    margin-left: 27px;
    display: flex;
    align-items: center;
    // min-width: 245px;
    // line-height:47px;
    grid-gap:25px;
    .jl-t {
      white-space: nowrap;
      color: transparent;
      background-repeat: no-repeat;
      background-position: left center;
      font-weight: 500;
      background-image: linear-gradient(to right, #ff02a4, #fffdb9);
      -webkit-background-clip: text;
      display: flex;
      align-items: center;
      // margin-right: 25px;

      &:before {
        content: '';
        width: 20px;
        height: 20px;
        background: url('../assets/pro/header/jl_icon.svg') no-repeat;
        display: block;
        margin-right: 6px;
      }
    }

    .notice {
      background: url('../assets/pro/header/notice_icon.svg') no-repeat;
      width: 28px;
      height: 28px;
      display: block;
      position: relative;
      .num {
        background: #11CCB1;
        color: #fff;
        font-size: 12px;
        font-weight: normal;
        // height:18px;
        padding: 0px 3px;
        line-height: 18px;
        border-radius: 18px;
        position: relative;
        top: -5px;
        right: -14px;
      }

      .tip-notice-panel {
        position: absolute;
        width: 400px;
        height: 417px;
        right: 0px;
        top: 28px;
        padding-top: 19px;
        // display: none;

        .tnp-wrap {
          background: #23232A;
          border-radius: 16px;
          padding: 18px 10px 0px 30px;
          cursor: default;
          box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);
          .tnp-tab {
            font-size: 16px;
            color: #969696;

            a {
              position: relative;

              &:first-child {
                margin-right: 30px;
              }

              &:after {
                content: '';
                position: absolute;
              }

              &.active {
                color: #fff;
                font-weight: 500;

                &:after {
                  width: 24px;
                  height: 2px;
                  background: #fff;
                  left: 15%;
                  border-radius: 2px;
                  bottom: -5px;
                }
              }
            }
          }

          .tnp-panel-con-wrap {
            min-height:300px;
            padding-bottom: 20px;
            max-height: 300px;
            overflow-y: auto;
            padding-right: 20px;

            /*滚动条整体部分,必须要设置*/
            &::-webkit-scrollbar {
              width: 3px;
              height: 8px;
              background-color: transparent;
            }

            /*滚动条的轨道*/
            &::-webkit-scrollbar-track {
              background-color: transparent;
            }

            /*滚动条的滑块按钮*/
            &::-webkit-scrollbar-thumb {
              border-radius: 3px;
              background-color: #626262;
            }

            /*滚动条的上下两端的按钮*/
            &::-webkit-scrollbar-button {
              height: 0;
            }

            /* 两个滚动条的交汇处 */
            &::-webkit-scrollbar-corner {
              background-color: transparent;
            }
          }

          .tnp-panel-con {

            li {
              margin-top: 14px;

              // display:flex;
              // align-items: center;
              // justify-content: space-between;
              .tnp-con-lt {
                display: flex;
                align-items: center;
                width: 100%;

                .img-avatar {
                  width: 32px;
                  height: 32px;
                  object-fit: cover;
                  border-radius: 32px;
                  margin-right: 15px;
                }

                .title-basic {
                  width: 100%;

                  .name {
                    color: #fff;
                    font-weight: 500;
                    font-size: 14px;
                  }

                  .desc {
                    color: #969696;
                    font-size: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .dtxt{
                      max-width: 70%;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    }
                  }
                }
              }

              .tnp-stime {
                font-size: 12px;
                color: #969696;
              }
            }
          }

          .tnp-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #2C2C2D;
            line-height: 49px;
            font-size: 14px;
            color: #969696;

            a:hover {
              text-decoration: underline;
            }

            .a-ald-readed {}

            .a-view-all {
              background: url('../assets/pro/m_arrow.svg') no-repeat;
              background-position: right center;
              padding-right: 20px;
            }

            &.flx-center {
              justify-content: center;
            }
          }
        }
      }

      &:hover {
        .tip-notice-panel {
          display: inherit;
        }
      }
    }

    .user-avatar {
      width: 36px;
      max-width:36px;
      // height: 36px;
      min-width: 36px;
      // padding-left: 30px;
      // border-radius: 36px;
      position: relative;

      &.hascircle:before {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 10px;
        position: absolute;
        right: 0px;
        top: 0px;
        background: #11CCB1;
      }

      .tar-img {
        border-radius: 36px;
        height:36px;
        width:100%;
        // height:100%;
        object-fit:cover;
      }
      .user-panel-box {
        position: absolute;
        right: 0px;
        top:28px;
        padding-top:20px;
        display: none;
        animation: hdpanel .3s ease forwards;
        .wrap {
          background: #23232A;
          cursor: default;
          width: 439px;
          padding: 26px 14px;
          border-radius: 16px;
          box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);
          .basic-uinfo {
            display: flex;

            .avatar {
              width: 50px;
              height: 50px;
              border-radius: 50px;
              overflow: hidden;
              margin-right: 16px;

              img {
                width: 100%;
                height: 100%;
                object-fit:cover;
              }
            }

            .basic-info {
              .name {
                font-size: 16px;
                font-weight: 600;
                color: #fff;
                background: url('../assets/pro/m_arrow.svg') no-repeat;
                background-position: right 7px;
                margin-bottom: 7px;
                line-height: 22px;
                display: flex;
                width: max-content;
                padding-right: 13px;
                align-items: center;
                justify-content: center;
              }

              .edit-link {
                color: #969696;
                font-size: 14px;

                &:hover {
                  text-decoration: underline;
                }
              }
            }
          }

          .num-statistics-box {
            display: flex;
            align-items: center;
            margin-top: 21px;

            a {
              width: 95px;
              height: 105px;
              background-color: #171719;
              margin-right: 11px;
              border-radius: 8px;
              padding-top: 49px;
              text-align: center;
              transition: .1s all linear;

              &:last-child {
                margin-right: 0px;
              }

              .ncount {
                color: #fff;
                font-weight: 500;
                line-height: 22px;
                font-size: 16px;
                display: block;
                font-style: normal;
              }

              .txt {
                font-size: 12px;
                font-weight: 500;
                line-height: 17px;
                margin-top: 4px;
                color: #969696;
                transition: .1s all linear;
              }

              &:hover {
                .txt {
                  color: #fff;
                }
              }
            }

            .a-my-realease {
              background-image: url('../assets/pro/l_a_my_realease_cus_icon.svg');
              background-repeat: no-repeat;
              background-position: center 12px;
              background-size: 30px 30px;

              &:hover {
                background-image: url('../assets/pro/a_my_realease_icon.svg');
              }
            }

            .a-my-parise {
              background-image: url('../assets/pro/l_a_my_parise_cus_icon.svg');
              background-repeat: no-repeat;
              background-position: center 12px;
              background-size: 30px 30px;

              &:hover {
                background-image: url('../assets/pro/a_my_parise.svg');
              }
            }

            .a-my-fav {
              background-image: url('../assets/pro/l_a_myfav_cus_icon.svg');
              background-repeat: no-repeat;
              background-position: center 12px;
              background-size: 30px 30px;

              &:hover {
                background-image: url('../assets/pro/a_myfav_icon.svg');
              }
            }

            .a-my-bw-history {
              background-image: url('../assets/pro/l_a_bw_myhistory_icon.svg');
              background-repeat: no-repeat;
              background-position: center 12px;
              background-size: 30px 30px;

              &:hover {
                background-image: url('../assets/pro/a_bw_myhistory_icon.svg');
              }
            }
          }

          .mg-items {
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            padding: 0px 14px;

            a {
              color: #969696;
              transition: .1s all linear;
              width:100%;
              text-align: center;
              &:not(:last-child){
                border-right:1px solid #ddd;
              }
              &:hover {
                color: #fff;
              }
            }
          }
        }
      }

      &:hover {
        .user-panel-box {
          display: inherit;
        }
      }
    }

    .release-plus {
      display: flex;
      position: relative;
      &:before{
        content:'';
        // margin-left: 30px;
        width: 36px;
        height: 36px;
        background: url('../assets/pro/daohangfabu_icon2.svg') no-repeat;
        background-size: 16px 16px;
        color: #fff;
        line-height: 30px;
        font-size: 22px;
        position: relative;
        transition:.1s all linear;
        background-position: center;
        background-color:#11CCB1;
        border-radius:18px;
        border:1px solid #11CCB1;
      }

      .sub-dd-block {
        position: absolute;
        top:28px;
        right:-10px;
        display: none;
        padding:23px 10px 10px 10px;
        animation: hdpanel .3s ease forwards;
        .sub-ddls {
          background-color: #23232A;
          border-radius: 16px;
          padding: 15px 11px 10px 11px;
          font-size: 16px;
          min-width: 188px;
          box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.3);
          cursor: default;

          display:flex;
          flex-direction: column;
          grid-gap:10px;
          li {
            line-height: 44px;
            overflow: hidden;
            border-radius: 7px;

            .rv {
              display: inline-block;
              user-select: none;
              width: 100%;
              padding-left: 51px;
              color: #fff;
              height: 100%;
              white-space: nowrap;
              transition:background-color .2s ease;

              &:hover {
                background-color: #1A1A1D;
              }
            }

            &.f-work-btn {
              .rv {
                background-image: url('../assets/pro/f_zuopin_icon.svg');
                background-repeat: no-repeat;
                background-size: 20px 20px;
                background-position: 19px center;
              }
            }

            &.f-game-pic-btn {
              .rv {
                background-image: url('../assets/pro/shangchuanyouxijietu_icon.svg');
                background-repeat: no-repeat;
                background-size: 20px 20px;
                background-position: 19px center;
              }
            }

            &.f-s-video-btn {
              .rv {
                background-image: url('../assets/pro/f_video_icon.svg');
                background-repeat: no-repeat;
                background-size: 20px 20px;
                background-position: 19px center;
              }
            }

            &.f-article-btn {
              .rv {
                background-image: url('../assets/pro/f_article_icon.svg');
                background-repeat: no-repeat;
                background-size: 20px 20px;
                background-position: 19px center;
              }
            }
          }
        }
      }

      &:hover {
        &:before{
          content:'';
          background-color:#0fab94;
          border-color:#0fab94;
        }
        .sub-dd-block {
          display: inherit;
        }
      }
    }

    .login-btn {
      width: 83px;
      min-width: 83px;
      text-align: center;
      font-size: 14px;
      color: #fff;
      background: #11CCB1;
      user-select: none;
      line-height: 36px;
      margin-left: 6px;
      border-radius: 8px;
      transition:.1s all linear;
      margin-top:7px;
      &:hover{
        background: #0fab94;
      }
    }
  }


  &.active {
    z-index: 99999;
    .header-mask:after{
      content: '';
      background: rgba(0, 0, 0, 0.6);
      -webkit-backdrop-filter: saturate(180%) blur(16px);
      backdrop-filter: saturate(180%) blur(16px);
      animation:opacity .2s ease-in;
      position: fixed;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      animation:opacity .2s linear;
    }
    .search-bx {
      z-index: 9999999;
      form{
        display:flex !important;
      }
    }
  }
}

.new-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  left: 0px;
  height: 78px;
  // background: #fff;
  background: transparent;
  top: 0px;
  z-index: 4;
  padding-right: 75px;
  backdrop-filter: saturate(180%) blur(16px);
  background: rgba(255, 255, 255, 0.8);
  padding-left: 26px;

  .cut-pic-tip-box-nav {
    position: relative;

    >span {
      width: 35px;
      display: inline-block;

      &:after {
        content: '';
        display: inline-block;
        width: 34px;
        height: 16px;
        background: url('../assets/ai_logo.png') no-repeat;
        background-size: cover;
        position: relative;
        top: -16px;
        right: 16px;
      }
    }

    &:hover {
      color: #2e334d;

      >span:hover {
        color: #11ccb1;
      }
    }

    .cut-pic-tip-box {
      &:hover {
        color: #fff !important;
      }

      position: absolute;
      background: #13cbb0;
      width: 205px;
      height: 154px;
      z-index: 28;
      left: -22px;
      padding: 10px;
      border-radius: 8px;
      top: 41px;

      .b-tit {
        .tit {
          font-size: 16px;
          font-weight: bold;
        }

        .close-cut-pic-tiop-btn {
          float: right;
          margin-top: 3px;
          font-size: 18px;

          &:hover {
            opacity: 0.8;
          }
        }
      }

      .tip-con {
        font-size: 14px;
        word-break: break-all;
        font-weight: normal;
        white-space: pre-wrap;
        margin-top: 17px;
      }

      .b-tit-bot {
        margin-top: 12px;
        text-align: right;

        .i-know-btn {
          line-height: 41px;
          min-width: 84px;
          text-align: center;
          border-radius: 41px;
          margin-right: 0px;
          border: 1px solid #fff;

          &:hover {
            color: #fff;
            opacity: 0.8;
          }
        }
      }

      &:before {
        position: absolute;
        content: '';
        height: 0;
        left: 17%;
        top: -5px;
        border-top: 13px solid #13cbb0;
        border-left: 13px solid transparent;
        border-bottom: 13px solid transparent;
        transform: rotate(-45deg);
      }
    }
  }
}

.absolute-header {
  .cut-pic-tip-box-nav {
    position: relative;

    &:hover {
      color: #fff;

      >span:hover {
        color: #11ccb1;
      }
    }

    .cut-pic-tip-box {
      &:hover {
        color: #fff !important;
      }

      position: absolute;
      background: #13cbb0;
      width: 205px;
      height: 154px;
      z-index: 28;
      left: -22px;
      padding: 10px;
      border-radius: 8px;
      top: 41px;

      .b-tit {
        .tit {
          font-size: 16px;
          font-weight: bold;
        }

        .close-cut-pic-tiop-btn {
          float: right;
          margin-top: 3px;
          font-size: 18px;

          &:hover {
            opacity: 0.8;
          }
        }
      }

      .tip-con {
        font-size: 14px;
        word-break: break-all;
        font-weight: normal;
        white-space: pre-wrap;
        margin-top: 17px;
      }

      .b-tit-bot {
        margin-top: 12px;
        text-align: right;

        .i-know-btn {
          line-height: 41px;
          min-width: 84px;
          text-align: center;
          border-radius: 41px;
          margin-right: 0px;
          border: 1px solid #fff;

          &:hover {
            color: #fff;
            opacity: 0.8;
          }
        }
      }

      &:before {
        position: absolute;
        content: '';
        height: 0;
        left: 17%;
        top: -5px;
        border-top: 13px solid #13cbb0;
        border-left: 13px solid transparent;
        border-bottom: 13px solid transparent;
        transform: rotate(-45deg);
      }
    }
  }
}

.normal-bl {
  backdrop-filter: inherit;
  background: #fff;
  box-shadow: none;
}

.home-bgclr {
  background: transparent;

  .new-header-navs a {
    color: #fff;
  }
  .el-n-us-search {
    background: transparent !important;

    input {
      background: transparent;
      color: #fff;
      border-color: #bdbdc1 !important;
    }
  }
}

.members-rank-bgclr {
  background: transparent;

  .new-header-navs a {
    color: #fff;
  }

  .new-nav-more {
    width: 32px;
    height: 78px;
    background-size: 18px 4px;
    background-position: center;
    position: relative;

    .other-page-navs {
      a {
        color: #2e334d;

        &:hover {
          color: #11ccb1;
        }
      }
    }
  }

  .el-n-us-search {
    background: transparent !important;

    input {
      background: transparent;
      color: #fff;
      border-color: #bdbdc1 !important;
    }
  }
}

.recruit-home-bgclr {
  background: transparent;

  .new-header-navs a {
    color: #fff;
  }

  .new-nav-more {
    width: 32px;
    height: 78px;
    background-size: 18px 4px;
    background-position: center;
    position: relative;

    .other-page-navs {
      a {
        color: #2e334d;

        &:hover {
          color: #11ccb1;
        }
      }
    }
  }

  .el-n-us-search {
    background: transparent !important;

    input {
      background: transparent;
      color: #fff;
      border-color: #bdbdc1 !important;
    }
  }
}

.inspiration-bgclr {
  background: transparent;

  .new-header-navs a {
    color: #fff;
  }

  .new-nav-more {
    width: 32px;
    height: 78px;
    background-size: 18px 4px;
    background-position: center;
    position: relative;

    .other-page-navs {
      a {
        color: #2e334d;

        &:hover {
          color: #11ccb1;
        }
      }
    }
  }


  .el-n-us-search {
    background: transparent !important;

    input {
      background: transparent;
      color: #fff;
      border-color: #bdbdc1 !important;
    }
  }
}

.bountyscheme-bgclr {
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: saturate(180%) blur(6px);

  .new-header-navs a {
    color: #fff;
  }

  .new-nav-more {
    width: 32px;
    height: 78px;
    background-size: 18px 4px;
    background-position: center;
    position: relative;

    .other-page-navs {
      a {
        color: #2e334d;

        &:hover {
          color: #11ccb1;
        }
      }
    }
  }

}

.personal-center-bgclr {
  background: transparent;

  .new-header-navs a {
    color: #fff;
  }

  .new-nav-more {
    width: 32px;
    height: 78px;
    background-size: 18px 4px;
    background-position: center;
    position: relative;

    .other-page-navs {
      a {
        color: #2e334d;

        &:hover {
          color: #11ccb1;
        }
      }
    }
  }

  .el-n-us-search {
    background: transparent !important;

    input {
      background: transparent;
      color: #fff;
      border-color: #bdbdc1 !important;
    }
  }
}

.inspiration-info-bgclr {
  background: transparent;

  .new-header-navs a {
    color: #fff;
  }

  .new-nav-more {
    width: 32px;
    height: 78px;
    background-size: 18px 4px;
    background-position: center;
    position: relative;

    .other-page-navs {
      a {
        color: #2e334d;

        &:hover {
          color: #11ccb1;
        }
      }
    }
  }

  .el-n-us-search {
    background: transparent !important;

    input {
      background: transparent;
      color: #fff;
      border-color: #bdbdc1 !important;
    }
  }
}

.other-page-navs li a {
  color: #000;
}

.right-navs {
  display: flex;
  align-items: center;
  width: 40%;
  justify-content: flex-end;

  .menu-found-releasebtn {
    width: 168px;
    min-width: 168px;
    line-height: 46px;
    // border:1px solid #00CDB2;
    // background:#000000;
    text-align: center;
    color: #000;
    overflow: hidden;
    margin-right: 27px;
    display: inline-block;
    border-radius: 46px;
    cursor: pointer;
    // background-image: url('../assets/20220929/zhuanqian.png');
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 16px;
    user-select: none;
    transition: 0.2s all linear;
    padding-left: 30px;

    &:hover {
      opacity: 0.8;
    }
  }

  .nav-has-s-minitip {
    position: relative;

    .nav-s-mini-tip {
      background: #1c2034;
      color: #fff;
      line-height: 34px;
      border-radius: 8px;
      padding: 0px 10px;
      position: absolute;
      display: inline-block;
      white-space: nowrap;
      top: 58px;
      z-index: 2;
      left: -12px;
      display: none;
    }

    .nav-s-mini-tip:before {
      content: '';
      width: 14px;
      height: 7px;
      // background: url('../assets/eleven/more_circel.png') center center no-repeat;
      position: absolute;
      top: -7px;
      left: 35%;
      background-position: right;
    }
  }

  .nav-has-s-minitip:hover {
    .nav-s-mini-tip {
      display: block;
    }
  }

  .us-email {
    // background: url('../assets/eleven/nav_email.png') no-repeat;
    width: 20px;
    min-width: 20px;
    margin-right: 27px;
    height: 78px;
    background-position: center;
    cursor: pointer;
  }

  .us-lamp {
    // background: url('../assets/eleven/nav_lamp.png') no-repeat;
    width: 21px;
    min-width: 21px;
    height: 21px;
    margin-right: 27px;
    cursor: pointer;
    background-position: center;
  }

  .custom-lamp {
    // background: url('../assets/eleven/nav_moon.png') no-repeat;
    width: 21px;
    min-width: 21px;
    height: 21px;
    margin-right: 27px;
    cursor: pointer;
    background-position: center;
    background-color: #fff;
    border-radius: 21px;
  }

  .us-fav {
    position: relative;

    .hs-us-fav {
      // background: url('../assets/eleven/nav_fav.png') no-repeat;
      width: 21px;
      min-width: 21px;
      height: 19px;
      margin-right: 27px;
      background-position: center;
      cursor: pointer;
      height: 78px;

      .nav-s-mini-tip {
        left: -23px;
      }
    }

    .fav-wrap-items {
      // background: #fff;
      background: transparent;
      transition: 0.2s all linear;
      position: absolute;
      width: 365.99px;
      z-index: 1;
      display: none;
      top: 78px;
      right: -155px;
      // box-shadow: rgb(0 0 0 / 10%) 0px 4px 6px -1px,
      //   rgb(0 0 0 / 6%) 0px 2px 4px -1px;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;

      //   backdrop-filter: saturate(180%) blur(16px);
      // background-color: rgba(255, 255, 255, 0.9);
      .box {
        border-bottom: none;
        padding: 0px;
        margin: 0px 20px;
      }

      .sub-tabs {
        border-radius: 10px;
        background: #f5f6fa;
        margin: 14px 17px 0px 17px;
        height: 42px;
        line-height: 42px;
        padding: 0px 4px;
        display: flex;
        align-items: center;

        a {
          font-size: 14px;
          width: 161px;
          text-align: center;
          display: inline-block;
          line-height: 32px;
          height: 32px;
          transition: 0.2s all linear;
          margin-right: 10px;
        }

        a:hover {
          background: #11ccb1;
          border-radius: 10px;
          color: #fff;
        }

        a.active {
          background: #11ccb1;
          border-radius: 10px;
          color: #fff;
        }
      }

      .custom-input {
        display: block;
        width: 100%;
        height: 45px;
        line-height: 43px;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        overflow: hidden;
        font-size: 14px;
        color: #333;
        padding: 0 50px 0 46px;
        background-position: 17px;
      }

      .rp-work-list {
        max-height: 350px;
        overflow-y: auto;
        margin: 10px 10px 10px 20px;
        padding-right: 10px;

        .item {
          border: 1px solid #e3e3e3;
          border-radius: 4px;
          padding: 7px;
          display: flex;
          align-items: center;
          transition: 0.2s all linear;
          cursor: pointer;
          margin-bottom: 5px;

          .img-box {
            min-width: 67px;
            width: 67px;
            height: 50px;
            margin-right: 14px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .empty-img {
              background: #d5d6df;
              width: 100%;
              height: 100%;
              display: inline-block;
            }
          }

          .bas-item-info {
            width: 100%;

            .bas-tit {
              margin-bottom: 14px;
              font-size: 14px;
              color: #000;
              display: block;
              font-weight: 500;
            }

            .nums {
              i {
                font-style: normal;
                padding-left: 20px;
                margin-right: 20px;
                color: #aaa;
              }

              .i1 {
                // background-image: url(../assets/eleven/zan.png);
                background-repeat: no-repeat;
                background-position: 5px 3px;
              }

              .i2 {
                // background-image: url(../assets/eleven/see.png);
                background-repeat: no-repeat;
                background-position: 5px 4px;
              }
            }
          }
        }

        .item:hover {
          background: #e9ebf4;
        }

        .item.selected {
          background: #20c7a9;
          border-color: #20c7a9;

          .bas-item-info {
            .bas-tit {
              color: #fff;
            }

            .nums {
              i {
                color: #fff;
              }

              .i1 {
                // background-image: url(../assets/eleven/zan_selected.png);
                background-repeat: no-repeat;
                background-position: 5px 3px;
              }

              .i2 {
                // background-image: url(../assets/eleven/see_selected.png);
                background-repeat: no-repeat;
                background-position: 5px 4px;
              }
            }
          }
        }
      }

      .custom-input {
        display: block;
        width: 100%;
        height: 45px;
        line-height: 43px;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        overflow: hidden;
        font-size: 14px;
        color: #333;
        padding: 0 50px 0 46px;
        background-position: 17px;
      }

      .btnbox {
        .btn {
          border-radius: 4px;
          font-size: 16px;
          user-select: none;
          transition: 0.2s all linear;
        }

        .confirm {
          border: 1px solid #20c7a9 !important;
          background: #20c7a9 !important;
          color: #fff !important;
        }

        .confirm:active {
          opacity: 0.7;
        }

        .cancel {
          border: 1px solid #c6c6c6;
        }
      }
    }
  }

  // .us-fav:hover{
  //   .fav-wrap-items{
  //     display:block;
  //   }
  // }
  .login-sys-notice {
    width: 17px;
    min-width: 17px;
    height: 78px;
    display: inline-block;
    background-position: center;
    cursor: pointer;
    position: relative;

    .nav-s-mini-tip {
      left: -23px;
    }
  }

  .has-sys-n {
    position: relative;

    .sys-num {
      background: #ef6a63;
      line-height: 18px;
      padding: 0px 2px;
      color: #fff;
      font-size: 12px;
      min-width: 20px;
      text-align: center;
      font-weight: bold;
      font-style: normal;
      border-radius: 18px;
      display: inline-block;
      position: absolute;
      top: 25px;
      right: -10px;
    }
  }
}

.right-navs .login-btn {
  background: #fff;
  color: #0c0c0c;
  width: 71px;
  line-height: 45px;
  border-radius: 46px;
  border: 1px solid #e0dfe4;
  font-size: 16px;
  margin-left: 10px;
  cursor: pointer;
  transition: 0.3s all linear;
}

.right-navs .login-btn:active {
  background: #eee;
  border-color: #eee;
}

.right-navs .register-btn {
  background: #00cdb2;
  color: #fff;
  width: 71px;
  line-height: 45px;
  border-radius: 46px;
  height: 48px;
  border: 1px solid #00cdb2;
  font-size: 16px;
  margin-left: 28px;
  cursor: pointer;
  text-align: center;
  transition: 0.3s all linear;
  position: relative;
  margin-right: 10px;
}

.right-navs .register-btn:active {
  background: #0abba4;
  border-color: #0abba4;
}

.new-header .left-navs {
  display: flex;
  align-items: center;
  width: 69%;
}

.new-header .left-navs>img {
  max-width: 120px;
  min-width: 120px;
  height: 33px;
}

.new-nav-more {
  width: 32px;
  height: 78px;
  background-size: 18px 4px;
  background-position: center;
  position: relative;
}

.other-page-navs {
  position: absolute;
  // background: #fff;
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  width: 220px;
  // padding:20px 0px;
  top: 78px;
  left: -20px;
  transition: 0.3s all linear;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  display: none;
  // box-shadow: rgb(0 0 0 / 10%) 0px 4px 6px -1px,
  //   rgb(0 0 0 / 6%) 0px 2px 4px -1px;
  // backdrop-filter: saturate(180%) blur(16px);
  //   background: rgba(255, 255, 255, 0.8);

  // &:before{
  //   content: '';
  //   background: rgba(255, 245, 237);
  //   filter: blur(10px);
  //   width: 100%;
  //   height: 100%;
  //   position: absolute;
  //   left: 0;
  //   top: 0;
  //   z-index: -1;
  // }
}

// .new-nav-more:hover .other-page-navs {
//   display: inline-block;
// }
.other-page-navs li {
  width: 100%;
  line-height: 40px;
  cursor: default;
}

.other-page-navs li a {
  // width: 100%;
}

.other-page-navs li a {
  padding: 0px 20px;
}

.new-nav-hot:after {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  background-size: cover;
  position: relative;
  top: -7px;
  right: -2px;
}

.new-nav-new:after {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  // background: url('../assets/eleven/nav_hot.png') no-repeat;
  background-size: cover;
  position: relative;
  top: -7px;
  right: -2px;
}

.new-header-navs {
  display: flex;
  align-items: center;
  //margin-left: 54px;
  margin-left: 35px;
}

.new-header-navs a {
  font-size: 16px;
  //margin-right: 40px;
  margin-right: 30px;
  display: inline-block;
  color: #2e334d;
  white-space: nowrap;
  font-weight: 600;
  transition: none;

  &:hover {
    color: #11ccb1;

    .cut-pic-tip-box {
      color: #fff;
    }
  }

  .cut-pic-tip-box {
    color: #fff;

    a {
      color: #fff;
    }
  }
}

.go-top {
  position: fixed;
  right: 10px;
  bottom: 20%;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #fff;
  transition: 0.3s;
  overflow: hidden;
  display: none;
}

.go-top.show {
  display: block;
}

.go-top i {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  -ms-background-size: cover;
  background-size: cover;
  transition: 0.3s;
  background-image: url();
}

.menuBtn {
  top: 50% !important;
}

.upload-sub-menus {
  position: absolute;
  width: 331.99px;
  height: 269px;
  right: 0px;
  z-index: 1;
  background: transparent;
  // background: #fff;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  cursor: default;
  top: 78px;
  padding: 32px;
  transition: 0.2s all linear;
  display: none;
  // box-shadow: rgb(0 0 0 / 10%) 0px 4px 6px -1px,
  //   rgb(0 0 0 / 6%) 0px 2px 4px -1px;
  //   backdrop-filter: saturate(180%) blur(16px);
  // background-color: rgba(255, 255, 255, 0.9);
}

.upload-sub-menu-one-box {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.upload-sub-menu-one-box>div {
  width: 128px;
  height: 96px;
  border-radius: 12px;
}

.upload-sub-menu-one-box .upload-work {
  background-color: #f1f1ff;
  background-position: 50px 30px;
  padding-top: 60px;
  font-size: 14px;
  transition: 0.2s all linear;
  cursor: pointer;
  color: #101011;
}

.upload-sub-menu-one-box .upload-screen-pic {
  background-color: #e6f7fe;
  background-position: 50px 30px;
  padding-top: 60px;
  cursor: pointer;
  font-size: 14px;
  transition: 0.2s all linear;
  margin-left: 12px;
  color: #101011;
}

.upload-sub-menu-two-box {
  line-height: 46px;
  background-color: #f5f5fa;
  background-position: 10px;
  font-size: 14px;
  transition: 0.2s all linear;
  border-radius: 12px;
  margin-top: 12px;
  color: #101011;
  text-align: left;
  padding-left: 44px;
  cursor: pointer;
}

.upload-sub-menu-three-box {
  line-height: 46px;
  background-color: #f5f5fa;
  background-position: 10px;
  font-size: 14px;
  transition: 0.2s all linear;
  border-radius: 12px;
  margin-top: 12px;
  text-align: left;
  padding-left: 44px;
  color: #101011;
  cursor: pointer;
}

.upload-bybtn-box {
  position: relative;
  height: 78px;
  display: flex;
  align-items: center;
}

.upload-bybtn-box:hover .upload-sub-menus {
  // display: inline-block;
}

.upload-bybtn-box.upload-bybtn {
  display: inline-block;
}

.upload-sub-menu-one-box .upload-work:hover {
  background-color: #e6e5fe;
}

.upload-sub-menu-one-box .upload-screen-pic:hover {
  background-color: #beebfc;
}

.upload-sub-menu-two-box:hover,
.upload-sub-menu-three-box:hover {
  background-color: #ebedf5;
}

.us-search {
  // background: url('../assets/eleven/nav_search.png') no-repeat;
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin-right: 27px;
  cursor: pointer;
  position: relative;
  background-position: center;

  .el-n-us-search {
    position: absolute;
    top: -15px;
    background: #fff;
    right: 18px;

    .search {
      display: none;
    }

    .nie-global-search-result-box {
      border: none;
      padding: 0px;
      top: 39px;
      background: inherit;

      .wrapp-box {
        border: 1px solid #d8dbeb;
        padding: 26px;
        margin-top: 8px;
        background: #fff;
        border-radius: 16px;
      }
    }

    .global-keyword-searchs {
      top: 39px;
      border: none;
      padding: 0px;
      background: inherit;

      .global-keyword-wrap {
        border: 1px solid #d8dbeb;
        padding: 26px;
        margin-top: 8px;
        background: #fff;
        border-radius: 16px;
      }
    }

    input {
      border: none;
      border-bottom: 1px solid #d8dbeb;
      line-height: 40px;
      height: 40px;
      width: 220px;
      padding-left: 10px;
    }

    input:focus {
      border-top: none !important;
      border-left: none !important;
      border-right: none !important;
      border-radius: 0px !important;
      border-bottom: 1px solid #d8dbeb;
      border-color: #d8dbeb !important;
    }
  }

  &:hover {
    .search {
      display: flex;
      align-items: center;
    }
  }
}

.other-mask {
  backdrop-filter: saturate(180%) blur(16px);
  background: rgba(255, 255, 255, 0.8);
  position: fixed;
  width: 100%;
  height: 300px;
  left: 0px;
  top: 78px;
  z-index: 3;
  display: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: rgb(0 0 0 / 10%) 0px 4px 6px -1px, rgb(0 0 0 / 6%) 0px 2px 4px -1px;
}

.fixed-nine-home-search {
  .common-icon-clear-inp {
    // margin-right:-4px !important;
  }

  .color-filter {
    margin-right: 10px;
    // min-width:72px;
    // border-left:1px solid #D8DBEB;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;

    .common-icon-clear-inp {
      position: absolute;
      right: -5px;
    }
  }

  .no-after {
    &:after {
      display: none;
    }
  }

  .cur-color-val {
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-left: 12px;
    border-radius: 24px;
    background-image: url('../assets/color_new_circle.png');
    background-repeat: no-repeat;
    background-position: center;
  }

  .cur-color-default-val {
    // background: url('../assets/eleven/color_default_sel.png') no-repeat;
    background-size: cover;
  }

  .el-color-picker {
    border: 1px solid red;
    width: 72px;
    position: absolute;
    right: 0px;
    opacity: 0;

    .el-color-picker__trigger {
      border: 1px solid red;
      width: 100%;
    }
  }
}

.common-pic-to-pic-btn {
  min-width: 20px;
  height: 19px;
  margin-right: 9px;
  background: url('../assets/icon_pic_to_pic_btn.png') no-repeat;
  background-size: cover;
  cursor: pointer;
  position: relative;
  z-index: 1;

  &.nav-has-s-minitip {
    position: relative;

    .nav-s-mini-tip {
      background: #1c2034;
      color: #fff;
      line-height: 34px;
      border-radius: 8px;
      padding: 0px 10px;
      position: absolute;
      display: inline-block;
      white-space: nowrap;
      top: 30px;
      z-index: 2;
      left: -50px;
      display: none;
    }

    .nav-s-mini-tip:before {
      content: '';
      width: 14px;
      height: 7px;
      // background: url('../assets/eleven/more_circel.png') center center no-repeat;
      position: absolute;
      top: -6px;
      left: 40%;
      background-position: right;
    }
  }

  &.nav-has-s-minitip:hover {
    .nav-s-mini-tip {
      display: block;
    }
  }
}
</style>